HTML таблица DOM создает неправильное количество дочерних элементов

Question

В моем коде есть таблица, которую я использую в качестве справочной таблицы, используя некоторые значения из <td> на основе идентификатора <tr>.

<table>
<tr id="nas">
<td>1.34</td>
<td>0.67</td>
<td>1</td>
<td>1.25</td>
</tr>
</table>

Когда явведите мою таблицу, как показано выше, и когда я это сделаю: document.getElementById("nas").childNodes.length результат будет 9, тогда как у меня явно есть только 4 дочерних элемента элемента <tr id="nas">.Некоторые из дочерних элементов являются действительными <td> s со значениями, некоторые являются просто пустыми элементами. Я действительно путаюсь с этим.

Однако, если я введу таблицу в одной строке, я получуправильное количество детей.

<table>
<tr id="nas"><td>1.34</td><td>0.67</td><td>1</td><td>1.25</td></tr>
</table>

Почему вы думаете, что это происходит?

Answer 1

childNodes
0 <TextNode textContent="\n">   
1 td
2 <TextNode textContent="\n">
3 td
4 <TextNode textContent="\n">
5 td        
6 <TextNode textContent="\n">
7 td
8 <TextNode textContent="\n">

Я точно не знаю, кто создает текстовые узлы, браузер или анализатор javascript, но вот что видит javascript.

Answer 2

Здесь есть хорошая статья, объясняющая проблему: https://developer.mozilla.org/en/whitespace_in_the_dom

Answer 3

childNodes включает ВСЕ дочерние узлы, включая текстовые узлы (то есть пробел между вашими ячейками). Попробуйте что-то вроде этого:

var children = document.getElementById('nas').childNodes,
    count = 0,
    len = children.length;

for (var i = 0; i < len; i++) {
    // make sure it's type ELEMENT_NODE
    if (children[i].nodeType === 1) { count++ }
}

alert(count); // 4

Answer 4

Потому что новая строка между тегами считается как текст и преобразуется в текстовый узел в DOM.