JavaScript DOM childNodes.length también devuelve el número de nodos de texto

Question

En DOM JavaScript, childNodes.length devuelve el número de elementos y nodos de texto. ¿Hay alguna forma de contar solo el número de nodos secundarios solo para elementos?

Por ejemplo, childNodes.length de div#posts volverán 6, cuando esperaba 2:

<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

No directamente. Los nodos de texto (incluidos los comentarios, etc.) son nodos secundarios.

Su mejor opción es iterar sobre la matriz childNodes y contar solo los nodos con nodeType == Node.ELEMENT_NODE. (Y escriba una función para hacerlo).

Answer 2

Puede filtrar por Node.nodeType (la documentación de Mozilla porque creo que es un gran recurso).

Answer 3

Puede usar Element.children, pero IE (hasta 8) seems to consider comment nodes también.

Answer 4

Puede utilizar 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>