为什么`childNodes`返回的数字大于我的预期？

Question

你能不能看看这个jsFiddle示例,并告诉我为什么数字'11'被警告而不是'5'(<li>元素数量)？

来自jsFiddle:

HTML

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

JavaScript的

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

Answer 1

的childNodes,根据所使用的浏览器,将返回文本节点,以及属于父节点的子标签.从技术上讲,<li>标签之间的空白也将被计入其中childNodes.

为避免处理它们,您可以检查一下nodeType != 3. 这是节点类型列表.

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