HTML 表格 DOM 创建错误数量的子元素答案

【问题标题】：HTML table DOM creates wrong number of child elementsHTML 表格 DOM 创建错误数量的子元素
【发布时间】：2011-11-12 10:10:40
【问题描述】：

我的代码中有一个表，我将其用作查找表，方法是根据<tr> 的 id 从<td> 获取一些值。

<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，而显然我只有元素 <tr id="nas"> 的 4 个子元素。一些子元素是真实的<td>s 有值，一些只是空元素。我真的对这个感到困惑。

但是，如果我在一行中输入表格，我会得到正确数量的孩子。

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

你认为为什么会这样？

【问题讨论】：

标签： html dom html-table children tree-nodes

【解决方案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 所看到的。

【讨论】：

【解决方案2】：

这里有一篇很好的文章解释了这个问题： https://developer.mozilla.org/en/whitespace_in_the_dom

【讨论】：

【解决方案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

【讨论】：

对那些阅读的人的注意：这是ElementNode.children 集合的快速简便的替代品，它具有参差不齐的浏览器支持。

【解决方案4】：

因为标签之间的换行被算作文本，并在 DOM 中转化为文本节点。

【讨论】：