HTML 表的 DOM 表示

Question

我只是编写了一些代码来遍历表的 DOM，结果让我大吃一惊。 DOM（至少在 FF 中）不是我所期望的。 FF 插入了一个 tbody 和各种文本节点，其中只包含一个“\n”。源 HTML 是：

<table>
<tr>
<th></th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th>
</tr>
<tr><th>2010</th>
<td id='tdid0'>53</td>   <td id='tdid1'>249</td>  <td id='tdid2'>1689</td>  <td id='tdid3'>22753</td>
<td id='tdid4'>23051</td><td id='tdid5'>23633</td><td id='tdid6'>23923</td> <td id='tdid7'>23306</td>
<td id='tdid8'>23943</td><td id='tdid9'>24196</td><td id='tdid10'>24440</td><td id='tdid11'>24156</td>
</tr>
<tr><th>2011</th>
<td id='tdid12'>24262</td><td id='tdid13'>22554</td><td id='tdid14'>25507</td><td id='tdid15'>23144</td>
<td id='tdid16'>24354</td><td id='tdid17'>24610</td><td id='tdid18'>24870</td><td id='tdid19'>24424</td>
<td id='tdid20'>24698</td><td id='tdid21'>22640</td><td></td><td></td></tr>
</table>

1 - FF 已插入 tbody 作为 table 的第一个子级，因此我必须向上 3 个级别（从 td< /code>) 来查找 table，而不是 2

2 - Firebug 中的 html 视图按预期显示 3 行，其中第 2 行和第 3 行有一个 th 后跟 12 td。然而，当单步执行时，结果发现 tbody 有 6 个子节点，每行后面有一个 NL 文本节点

3 - Firebug 声称每行有 13 个子节点，正如预期的那样（标题和12 个数据项）。然而，当使用 nextSibling 逐步遍历子级时，结果发现预期的 th 和 td 元素实际上是由文本节点分隔的，其中包含 WS 。 知道发生了什么事吗？浏览器基本上可以做它想做的事吗？谢谢。

Answer 1

FF 已插入 tbody

在 HTML 4 中，tr 元素可能不是 table 元素的子元素。您需要在其间添加 tbody、thead 或 tfoot 元素。不过 tbody 元素的开始 和 结束标记是可选的。 Firefox 正确插入它。

事实证明，tbody 有 6 个子节点，每行后面都有一个 NL 文本节点

你的标记中有空格

事实证明，预期的th和td元素实际上是由文本节点分隔的，其中包含WS

Ditto