Table注意事项

首先是一段 HTML 代码：

<table id="tb">     
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>            
    <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>

DOM解析

对于一段 table 的 HTML 代码，即使没有显式写出 tbody 结构，浏览器在解析的时候都会加上 tbody 结构。所以，对于以上代码，若想获取第一行，需要使用代码：

document.getElementById('tb').lastChild.firstChild; //第一行
//document.getelementById('tb').lastChild 得到的不是最后一行而是 tbody

firstChild 和 lastChild

除了IE，Firefox，Opera 和 Chrome 对 table 中的换行处理都有着令我困惑的处理。对于以上代码，table 的 firstChild 和 tbody 的 lastChild 得到的都是 text 而不是所以为的 tbody 和 tr；而各自的 children.length 依然是代码明面的子代个数，并没有包括解析得到的 text。

document.getElementById('tb').children.length; // output 1
document.getElementById('tb').firstChild.nodeName; // output '#text' but not 'tbody'
document.getElementById('tb').lastChild.children.length; // output 4
document.getElementById('tb').lastChild.lastChild.nodeName; // output '#text' but not 'tr'

相比之下，IE 对 table 中换行的处理是忽略，所以倒没有这个困惑。不知道处于什么考虑，Firefox 等浏览器都这样来处理。

一个小小的测试页面