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

Answer 1

您想要的是.children.length或.childElementCount（不推荐），因为childNodes获取所有 childNodes，还有文字节点，在您的情况下为4（换行符。）

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

Answer 2

childNodes返回3个列表项，它们的文本内容和它们之间的空格（但不是在所有浏览器中）。三种选择：

FF和Chrome：elem.childElementCount（将返回3）
IE（＆amp;＆amp; FF AFAIK）：elem.childNodes.length（=== 3）
旧IE：elem.children.length

Answer 3

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

你需要计算元素的数量，这里是an example solution基于应该适用于所有引擎的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

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 answer

的修改版本

Javascript - 子节点计数

4 个答案: