Question

我的代码中有一个表格，我将其用作查找表，方法是根据<td>的ID从<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>，有些只是空元素。我真的很困惑这个。

但是，如果我在一行中输入所有内容，我会得到正确数量的孩子。

<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

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

Answer 4

childNodes包括所有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

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

4 个答案: