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 ）找到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元素可能不是表元素的子元素。 你需要一個tbody，thead或tfoot元素。 tbody元素的開始和結束標記是可選的。 Firefox正確插入它。

事實證明，tbody有6個子節點，每行后面有一個NL文本節點

您的標記中有空白區域

事實證明，預期的th和td元素實際上是由包含WS的文本節點分隔的

同上