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也返回文本節點的數量

回答

相關問題