Почему показывается большее количество элементов, чем их реально есть?

Question

[Алексей]

Есть код:

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
var e = document.getElementById("list");

console.log(e.childNodes.length) // выводит 7
</script>

Почему конструкция e.childNodes.length выводит 7, а не 3?

Answer 1

[krasulya]

Потому что узлы в ДОМ необязательно элементы. В вашем случае, там есть текстовые узлы (строки с пробельными символами).

У каждого узла есть nodeType. У элементов он равен 1 (document.ELEMENT_NODE). Вам нужно отфильтровать все узлы на nodeType === document.ELEMENT_NODE

Answer 2

[SnowElephant]

childNodes включает текстовые ноды(переводы строк итд...), используйте children для получения только элементов. А для количества спиногрызов можно использовать и childElementCount.