Разница между "childNodes" и "children"

Для получения дочерних элементов в JavaScript существует две возможности: .childNodes и .children.

  • .childNodes является свойством Node. Это свойство имеют все узлы дерева.
  • .children является свойством Element. Данное свойство имеют только элементы типа Element и все возвращаемые значения точно такого же типа.

К примеру есть у нас менюшка, в которую нужно добавить класс active.

<ul class="nav" id="sidebar-menu">
    <li>
        <a href="http://nonamez.name">
            <i class="glyphicon glyphicon-home"></i>
            <span class="hidden-xs">Sites</span>
        </a>
    </li>
</ul>

Цепляем его по ID и смотрим результат:

document.getElementById('sidebar-menu').childNodes
вернёт NodeList[, li, ]

document.getElementById('sidebar-menu').children
вернёт HTMLCollection[li]

Как видим в первом варианте нам возвращает массив элементов с текстовым контентом вокруг него, во втором только массив элементов.

Fork me on GitHub