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

Answer 1

childNodes获取所有现有的 childNode，包括文本节点！在您的示例标记中，您有三个“常规节点”和 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);

Answer 2

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

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

2. IE (&& FF AFAIK): elem.childNodes.length(===3)

3. 旧版IE：elem.children.length

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

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答案的修改版本