web-dev-qa-db-ja.com

JavaScript DOMchildNodes.lengthもテキストノードの数を返します

JavaScript DOMでは、childNodes.lengthは要素ノードとテキストノードの両方の数を返します。要素のみの子ノードの数だけを数える方法はありますか？

例えば、 childNodes.length of div#posts 2を期待したときに、6を返します。

<div id="posts">
    <!-- some comment -->
    <!-- another comment -->
    <div>an element node</div>
    <!-- another comment -->
    <span>an element node</span>
    a text node
</div>
javascripthtmldomhtml-parsing
22
Samuel Liew

直接ではありません。テキストノード（コメントなどを含む）は子ノードです。

最善の策は、childNodes配列を反復処理し、nodeType == Node.ELEMENT_NODEでそれらのノードのみをカウントアップすることです。 （そして、そうするための関数を書いてください。）

23
mgiuca

Element.children 、しかしIE（最大8） コメントノードを考慮するようです も。

10
Felix Kling

Node.nodeType （Mozillaのドキュメントは素晴らしいリソースだと思うので）でフィルタリングできます。

3
andyb

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>
3
ConnorsFan