Selecting the firstChild and whitespace issue

Question

I have a markup like this:

<table id='myTable'>
 <thead>
   <tr>
    <td>Hello</td>
   </tr>
 </thead>
</table>

But when I try to select the firstChild of #table, it returns whitespace (as it is expected).

var ss = document.getElementById("myTable");
console.log(ss.firstChild);

And it returns:

 <TextNode textContent="\n     ">

How should I filter whitespace in getting child nodes?

There is no element with ID `myTable` in your markup, it's table! — Dhaval Marthak, Jul 23 '14 at 10:15
@DhavalMarthak, even `document.getElementById('table')` returns a text node > http://jsfiddle.net/uke6r/ — BenM, Jul 23 '14 at 10:18
If you're not looking for textNodes, just use `ss.children[0]` instead — adeneo, Jul 23 '14 at 10:20

score 6 · Answer 1 · answered Mar 09 '18 at 22:25

6

You can use the .firstElementChild will always return the first element, while the .firstChild might return whitespace (if there is any) to preserve the formatting of the underlying HTML source code.

answered Mar 09 '18 at 22:25

vasilisdmr

554
8
15

ardatt1155 · Answer 2 · 2014-07-23T14:39:15.037

Look at the article here http://www.sitepoint.com/removing-useless-nodes-from-the-dom/

This guy has given a JS function that filters out all the whitespace childnodes.

You can read the details of how the function works and why it can be so handy in that article. I will just copy-paste the code here.

function clean(node)
{
   for(var n = 0; n &lt; node.childNodes.length; n++)
   {
       var child = node.childNodes[n];
       if (child.nodeType === 8 || (child.nodeType === 3 && !/S/.test(child.nodeValue)))
       {
          node.removeChild(child);
          n--;
       }
       else if(child.nodeType === 1)
       {
          clean(child);
       }
   }
}

score 0 · Answer 3 · answered Jul 23 '14 at 10:38

The basic solution is to loop over the children and look of the one with the nodeType you are looking for.

If you don't want to do that yourself, then there are plenty of DOM libraries out there that do it for you (jQuery being the most popular, but not necessarily the best).

Selecting the firstChild and whitespace issue

3 Answers3

Linked

Related