Question

在JavaScript DOM中，childNodes.length返回元素和文本节点的数量。有没有办法只计算仅元素子节点的数量？

例如，childNodes.length的{{1}}将返回6，当我预期为2时：

div#posts

Answer 1

不直接。文本节点（包括注释等）是子节点。

最好的办法是遍历childNodes数组并仅计算nodeType == Node.ELEMENT_NODE个节点。（并编写一个函数来执行此操作。）

Answer 2

您可以使用Element.children，但也可以使用IE（最多8个）seems to consider comment nodes。

Answer 3

您可以按Node.nodeType进行过滤（Mozilla的文档，因为我认为这是一个很好的资源）。

Answer 4

您可以使用document.querySelectorAll('#posts > *')：

var children = document.querySelectorAll('#posts > *');
console.log('Number of children: ' + children.length);

<div id="posts">
    <!-- some comment -->
    <!-- another comment -->
    <div>an element node
        <span>a grand-child node</span>
    </div>
    <!-- another comment -->
    <span>an element node</span>
    a text node
</div>

Answer 5

调用element.childNodes将返回一个NodeList，其中<strong> DOES 包含文本和其他辅助项，而调用element.children将返回一个HTMLCollection对象，该对象不< / strong>包含文字和其他辅助项目。

如果必须使用childNodes，则必须了解使用循环遍历生成的NodeList之间存在区别

for(i in nodelist)

vs

for(i = 0 ; i < nodelist.length ; i++)

第一种方法还将检索文本和其他辅助项目。

JavaScript DOM childNodes.length也返回文本节点的数量

5 个答案: