Попытка получить доступ к узлам DOM, получить неправильные значения и длины узлов

Question

У меня есть следующий HTML:

<ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
</ul>

При попытке пройти по элементу,

1 nav.childNodes.length равно 9, Что такое девять узлов?

2 nav.childNodes[0].nodeType равно 3, но .nodeValue пусто.

РЕДАКТИРОВАТЬ:

Этоработает нормально после выполнения:

<ul id="nav"><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li><li><a href="#">Four</a></li></ul>

Почему пробелы считаются узлами?

Answer 1

Между узлами <li> есть текстовые узлы (в них ничего не видно). 5 + 4 = 9.

Answer 2

Остерегайтесь то, что вы заявляете, не соответствует действительности в IE.В IE ваш код показывает 4 дочерних узла.Это связано с тем, что IE не считает пробелы как узлы, а Mozilla, Chrome и Safari делают.

Как сказал Пойнти, пробелы - это узлы во всех кроме IE, поэтому пробел после ul и 4 li - это 5 узловиз пробелов + 4 узла из li = 9 узлов.

Если вы хотите только узлы LI:

document.getElementById("nav").getElementsByTagName("li").length

В ответе выше показано 4.И он работает одинаково во всех браузерах.

Если вам необходимо использовать все дочерние узлы, просто игнорируйте узлы типа 3 (текст и, следовательно, пробелы) и сконцентрируйтесь на узлах типа 1 (узлы элементов).