JavaScript DOM childNodes.length также возвращает количество текстовых узлов

В JavaScript DOM childNodes.length возвращает количество как элементов, так и текстовых узлов. Есть ли способ подсчитать только количество дочерних узлов только для элемента?

Например, childNodes.length of div#posts вернет 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>

Ответы

Ответ 1

Не напрямую. Текстовые узлы (включая комментарии и т.д.) Являются дочерними узлами.

Лучше всего перебирать массив childNodes и подсчитывать только те узлы с nodeType == Node.ELEMENT_NODE. (И напишите функцию для этого.)

Ответ 2

Вы можете использовать Element.children, но IE (до 8) похоже, рассматривает узлы комментариев тоже.

Ответ 3

Вы можете отфильтровать Node.nodeType (документация Mozilla, потому что я думаю, что это отличный ресурс).

Ответ 4

Вы можете использовать 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>