HTML 表 DOM 创建了错误数量的子元素

Question

我的代码中有一个表，我将其用作查找表，通过根据 的 id 从 获取一些值>。

<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 个子元素元素 。有些子元素是真正的带有值的，有些只是空元素。我真的对这个感到困惑。

但是，如果我将表格全部输入一行，我就会得到正确的孩子数量。

<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 中的文本节点。