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

Posted 2023-02-24

【中文标题】JavaScript DOM childNodes.length 还返回文本节点的数量

【英文标题】：JavaScript DOM childNodes.length also returning number of text nodes

【发布时间】：2011-09-15 07:46:57

【问题描述】：

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

例如，div#posts 中的childNodes.length 将返回 6，而我预期为 2：

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

【问题讨论】：

element.firstChild is returning '<TextNode ...' instead of an Object in FF的可能重复

【参考方案1】：

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

最好的办法是遍历 childNodes 数组并只计算具有nodeType == Node.ELEMENT_NODE 的那些节点。 （并为此编写一个函数。）

【讨论】：

旧版本的 IE 不公开Node 常量，因此为了兼容性，您需要直接使用Node.ELEMENT_NODE 的值，即1。

@Tim Down 知道哪个版本的 IE 开始支持这些常量吗？ （说我只想支持IE7以上，这样行吗？）

IE 7 和 8 没有它们。我认为 IE 9 可以。

@Tim Down 哇，这对微软来说已经很晚了。感谢您的提示。

【参考方案2】：

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

【讨论】：

请注意，2014 年 children 对 documentFragment 的支持很差

【参考方案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>

【参考方案4】：

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

【讨论】：

“过滤器”是指迭代和计数，还是实际上有一种快速的方法可以通过我不知道的 JS 中的某个条件进行过滤？

是的，只需按照您在回答中的建议以编程方式过滤即可。

【参考方案5】：

Envoking element.childNodes 将返回一个 NodeList，其中 DOES 包含文本和其他辅助项目，而 envoking element.children 将返回一个 htmlCollection 对象，其中 DOES NOT 包含文本和其他辅助项目。

如果你必须使用 childNodes，那么你必须明白使用循环遍历生成的 NodeList 是有区别的

for(i in nodelist)

对

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

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