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

Question

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

例如,当我预期2时childNodes.length,div#posts将返回6:

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

Answer 1

不是直接的.文本节点(包括注释等)是子节点.

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

Answer 2

你可以使用Element.children,但IE(最多8个)似乎也考虑了注释节点.

Answer 3

您可以使用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>