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

在JavaScript DOM中，childNodes.length返回元素和文本节点的数量。有什么方法可以只计算仅有元素的子节点的数量？不能直接JavaScript DOM childNodes.length也返回文本节点的数量

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

来源

2011-06-15 Samuel Liew

的可能重复[element.firstChild将返回 ' mplungjan 2011-06-15 07:48:38

：

例如，div#postschildNodes.length将返回图6，当我预期2。文本节点（包括注释等）是子节点。

最好的办法是迭代childNodes数组，并只计算那些带有nodeType == Node.ELEMENT_NODE的节点。（并写一个函数来做这件事。）

来源

2011-06-15 07:48:16 mgiuca

+1相同波长，只是更快一点:-) – andyb 2011-06-15 07:51:08

旧版本的IE不会公开'Node'常量，所以为了兼容性，您需要直接使用'Node.ELEMENT_NODE'的值，即'1'。 – 2011-06-15 08:21:23

@Tim Down任何想法IE的哪个版本开始支持这些常量？（说我只想支持IE7或更高版本，是否会继续工作？） – mgiuca 2011-06-16 02:39:19

你可以通过Node.nodeType来过滤（Mozilla的文档，因为我认为它是一个很好的资源）。

来源

2011-06-15 07:48:59 andyb

通过“过滤器”你的意思是迭代和计数，或者实际上是一种快速的方法来筛选JS中的某些条件，我不知道？ – mgiuca 2011-06-15 07:52:52

是的，只需按照您在答案中的建议，通过编程方式进行过滤。 – andyb 2011-06-15 08:14:49

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

来源

2011-06-15 07:53:49

请注意2014年'documentFragment'上的'children'支持很差 – Dan 2014-01-27 21:37:53

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

来源

2017-01-08 16:05:15 ConnorsFan

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

回答

相关问题