JavaScript - 子节点数量

Question

<ul>
    <li>Array1</li>
    <li>Array2</li>
    <li id="element">Array3</li>
</ul>
<script>
   var temp = document.getElementById('element').parentNode;
   child = temp.childNodes;
   console.log(temp.length);
</script>

我需要使用元素id获取子节点长度。我的代码返回7作为结果，但我只有3个节点。

- Karthick V

---

可能是重复的问题：使用JavaScript计算元素的直接子元素数量 -- 在提出新问题之前，请先搜索。 - Felix Kling

我接受你的回答，但我需要纯 JavaScript 的解决方案，而不是 jQuery。 - Karthick V

如果你仔细阅读答案，你会发现它根本没有使用jQuery。 - Felix Kling

Answer 1

childNodes 获取所有子节点，包括文本节点！在您的示例标记中，您有三个“普通节点”和4个文本节点 - 换行符 - 总共有7个子节点。

相反，你需要使用 .children.length 或者 .childElementCount（不支持 IE<9）来仅检索“实际”的节点：

let temp = document.getElementById('element').parentNode;
console.log(temp.children.length);
// or the following
console.log(temp.childElementCount);

- Christoph

---

@KarthickV 使用 .children，它将返回一个 HTML 集合并具有更好的支持。请参见此处的文档。 - Christoph

@KarthickV 一个重要的注意事项：孩子们使用得很正确，但在旧版IE中存在错误 - 它也会计算注释节点 <!-- comment -->！所以请注意。 - Christoph

它在IE 8中不起作用 http://jsfiddle.net/uyfPf/2/ - Julien Ch.

@JulienCh 可能是因为 IE8 不支持 childElementCount，所以你必须依靠 children.length 来支持旧版浏览器。 - Elias Van Ootegem

Answer 2

childNodes 返回三个列表项、它们的文本内容以及它们之间的空格（但不是所有浏览器都支持）。有三种替代方法：

1. FF 和 Chrome： elem.childElementCount （将返回 3）

2. IE（&& FF AFAIK）: elem.childNodes.length （===3）

3. 旧版 IE： elem.children.length

- Elias Van Ootegem

---

@KarthickV：我检查了childNodes.length，它在Chrome中不起作用（不知道我当时在想什么），我编辑了我的答案...还有：谁给我点了踩，为什么？ - Elias Van Ootegem

它对我来说运行良好（chrome：temp.childElementCount）...不知道是谁投了反对票..我会给一个赞..感谢您宝贵的答案。 - Karthick V

如果我说错了什么，我对被踩也没有意见。不过，知道我的错误在哪里（如果有的话）会很好。@Christoph：我并不指责任何人，顺便说一下：如果你是这样想的，我并不是出于恶意而给别人点踩。 - Elias Van Ootegem

Answer 3

“childrenNodes”属性包括所有类型的节点：TEXT_NODE，ELEMENT_NODE，COMMEN_NODE等等……

你需要计算元素的数量，这里是一个基于DOM的示例解决方案，应该适用于所有引擎：

var temp = document.getElementById('element').parentNode;
var children = temp.childNodes;
console.log(children.length); // 7

function countElements(children) {
  var count=0;
  for (var i=0, m=children.length; i<m; i++) 
     if (children[i].nodeType===document.ELEMENT_NODE) 
         count++;
  return count;
}
console.info(countElements (children));​ // 3

编辑

同样地，如果您想要一个使用 DOM 获取所有子元素的函数，这里是一个函数：

function childElements(node) {
  var elems = new Array();
  var children = node.childNodes;

    for (var i=0,i < children.length ; i++) {
         if (children[i].nodeType===document.ELEMENT_NODE) {
             elems.push(children[i]);
             return elems;
          }
         }
     }

console.info(childElements(temp).length);​ //3

- Julien Ch.

Answer 4

如果您想获取所有嵌套的DOM节点列表，可以使用以下代码片段：

function getNestedElements(node) {
  const elems = [];
  const children = node.childNodes;

  for (let i = 0; i < children.length; i++) {
    if (children[i].nodeType === document.ELEMENT_NODE) {
      elems.push(children[i], ...getNestedElements(children[i]));
    }
  }
  return elems;
}

这是@julien-ch的修改版答案

- Serhii Holinei