javascript - Firefox 的奇怪 DOM 问题

Question

当我尝试使用 JavaScript 在 while 循环中浏览表格的行和单元格时，遇到了一个奇怪的问题。我在 Win7 上使用 Firefox 3.5.7，并启用了 Firebug。

我有这个标记:

<table>
    <tbody>
        <tr id='firstRow'><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
    </tbody>
</table>

还有这个 JavaScript:

var row = document.getElementById('firstRow');
console.log(row); // Row call 1
while (row) {
    console.log(row); // Row call 2
    row = row.nextSibling;
}

我遇到的问题是在注释“Row call 1”的行上，Firebug 正在输出

<tr id='firstRow'>

正如预期的那样。然而，在 while 循环中，Firebug 给了我

<tr id='firstRow'>
<TextNode textContent="\n">

即使在 while 循环开始执行并且没有其他内容触及该行之后，它也会为完全相同的行提供不同的输出。对于后续行，它当然没有 id='firstRow' 作为属性。

这给我带来的更大问题是，如果我在 while 循环中，并且我想使用 row.cells[0] 访问当前行的特定单元格，Firebug 会给我该行一个错误。单元格未定义。

我想知道是否有人可以解释我正在经历的这种情况。

Answer 1

Firefox 正在拾取 tr 元素之间的空白作为附加节点。只需在对其执行任何操作之前添加一个测试来确定该节点确实是一个 tr:

var row = document.getElementById('firstRow');
console.log(row); // Row call 1
while (row) {
    if(row.nodeName == "TR"){
       console.log(row); // Row call 2 
    }
    row = row.nextSibling;
}

请注意，文本节点的 nodeName 为 #text，并且 nodeName 将始终返回全部大写的元素名称，无论如何您的文档中有它。