Why does `childNodes` return a number larger than I expect?

Question

Could you please look at this jsFiddle example, and tell me why the number \'11\' is alerted rather than \'5\' (the number of

elements)?

From

Answer 1

The childNodes, depending on the browser used, will return the text nodes, as well as the tags that are children of the parent node. So technically, the whitespace in between the <li> tags will also be counted among the childNodes.

To avoid processing them, you may check that nodeType != 3. Here is a list of node types.

var list = document.getElementById('list');
var list_items = list.childNodes;
var li_items = [];
for (var i=0; i<list_items.length; i++) {
  console.log(list_items[i].nodeType);

  // Add all the <li> nodes to an array, skip the text nodes
  if (list_items[i].nodeType != 3) {
    li_items.push(list_items[i]);
  }
}

Answer 2

As others have pointed out, the childNode count inclues the text nodes, generated by the whitespace between the <li> elements.

<ul id="list"><li>milk</li><li>butter</li><li>eggs</li><li>orange juice</li><li>bananas</li></ul>

That will give you 5 childNodes because it omits the whitespace.

Answer 3

I cobbled together a solution for this that I like. (I got the idea from this blog post.)

1) First I get the number of child elements nodes by using:

nodeObject.childElementCount;

2) Then I wrote a function that will return any child element node by index number. I did this by using firstElementChild and nextElementSibling in a for loop.

function getElement(x, parentNode){
    var item = parentNode.firstElementChild
    for (i=0;i<x;i++){
         item = item.nextElementSibling;
    }
    return item;
}

This returns the child element I need for anything I want to pull from it. It skips the problem with childNodes retuning all the different nodes that are not helpful when trying to parse just the elements. I am sure someone more experienced than me could clean this up. But I found this so helpful that I had to post it.

Answer 4

You have text nodes there.

You can skip them while iterating with...

for (var i = 0, length = list_items.length; i < length; i++) {
    if (list_items[i].nodeType != 1) {
        continue;
    }
    // Any code here that accesses list_items[i] will sure to be an element.
}

jsFiddle.

Alternatively, you could do it in a more functional way...

list_items = Array.prototype.filter.call(list_items, function(element) { 
                 return element.nodeType == 1;
             });

jsFiddle.

You must use convert it to a proper array to use the filter() method. childNodes property returns a NodeList object.

Answer 5

Use obj.children instead.

var list = document.getElementById('list');
var list_items = list.children;
alert(list_items.length);

The difference between this children and childNodes, is that childNodes contain all nodes, including text nodes and comment nodes, while children only contain element nodes. from w3schools.

Answer 6

Text nodes are included in the child nodes count. To get the proper value, you'd need to strip out text nodes, or make sure they are not in your code. Any white space between code is considered a space and a text node, so your count is the total number of text nodes.