Javascript - 子节点数答案

【问题标题】：Javascript - child node countJavascript - 子节点数
【发布时间】：2012-08-02 11:34:36
【问题描述】：

<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 个节点。

【问题讨论】：

Use javascript to count immediate child elements of an element 的可能重复项 -- 请在提出新问题之前使用搜索。
我接受你.. 但我需要纯 javascript 答案而不是 jquery
如果你仔细阅读答案，你会发现它根本不使用jQuery/

标签： javascript dom

【解决方案1】：

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

您想要的是.children.length 或.childElementCount（IE

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

【讨论】：

@KarthickV use .children 这将返回一个 html-collection 并且有更好的支持。见docu here
@KarthickV 一个重要的注意事项：儿童我们正确使用，但它在较旧的 IE 中存在问题 - 它也计算评论节点 ！所以请注意这一点。
它在 IE 8 中不起作用http://jsfiddle.net/uyfPf/2/
@JulienCh 可能是因为 IE8 不支持 childElementCount，对于旧版浏览器，您必须依赖 children.length

【解决方案2】：

childNodes 返回 3 个列表项、它们的文本内容以及它们之间的空格（但并非在所有浏览器中）。三种选择：

FF 和 Chrome：elem.childElementCount（将返回 3）
IE (&& FF AFAIK)：elem.childNodes.length (===3)
旧版IE：elem.children.length

【讨论】：

@KarthickV：我检查了childNodes.length，它在 chrome 中不起作用（不知道我在想什么）编辑了我的答案......还有：谁对我的答案投了反对票，为什么?
它对我来说很好用 (chrome:temp.childElementCount) .. 不知道谁投了反对票.. 会投一票.. 感谢您的宝贵回答
如果我说错了，我对否决票没有问题。但是，很高兴知道我的错误是什么（如果有的话）。 @Christoph：我不指责任何人，仅供参考：我不会出于恶意而投反对票，如果你是这么想的

【解决方案3】：

childrenNodes 属性包括所有类型的节点：TEXT_NODE、ELEMENT_NODE、COMMEN_NODE 等......

您需要计算元素的数量，这里是基于 DOM 的 an example solution，它应该适用于所有引擎：

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

【讨论】：

【解决方案4】：

如果要获取所有嵌套DOM节点的列表，可以使用这段代码sn-p：

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 answer的修改版

【讨论】：