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

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]);
  }
}