                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

var tbody = document.getElementById('table').lastChild; 這個(gè)到底是指哪個(gè)

?var tbody = document.getElementById('table').lastChild;
這個(gè)到底是指哪個(gè)。為什么他和?obj.parentNode.parentNode.parentNode是一樣的？

羅馬

2016-01-13

源自：JavaScript進(jìn)階篇 9-22

關(guān)注問題我要回答

1385

操作

收起

3 回答

EddieJones
2016-05-30

這兩行代碼指的都是tbody節(jié)點(diǎn)對(duì)象。

下面這張圖是chrome打開thml文件，按F12顯示的結(jié)果，瀏覽器在table標(biāo)簽下默認(rèn)添加tbody節(jié)點(diǎn)。

table節(jié)點(diǎn)對(duì)象下有2個(gè)子節(jié)點(diǎn)：

#text
TBODY

為什么是2個(gè)子節(jié)點(diǎn)？

原因是<table>與<tbody>之間有空格，空格也是字符，算作文本節(jié)點(diǎn)。（那為什么</tbody>與</table>之間的空格不算作文本節(jié)點(diǎn)？這個(gè)我也不知道）

所以代碼

var?tbody?=?document.getElementById('table').lastChild;

獲取的是tbody節(jié)點(diǎn)對(duì)象。

測(cè)試確認(rèn)table節(jié)點(diǎn)對(duì)象下有2個(gè)子節(jié)點(diǎn)的代碼如下:

<!DOCTYPE?html>
<html>
<head>
????<title>?new?document?</title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>
????<script?type="text/javascript">


????????function?myFunction()?{
????????????var?table?=?document.getElementById('table');
????????????var?c?=?table.childNodes;
????????????var?txt?=?"";
????????????var?i;
????????????for?(i?=?0;?i?<?c.length;?i++)?{
????????????????txt?=?txt?+?c[i].nodeName?+?"<br>";
????????????}
????????????document.write(txt);
????????}
????</script>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學(xué)號(hào)</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>

????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="javascript:;"?onclick="removeRow(this)"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>

????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:;"?onclick="removeRow(this)"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>

</table>
<input?type="button"?value="添加一行"??/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
<input?type="button"?value="測(cè)試table節(jié)點(diǎn)子節(jié)點(diǎn)數(shù)量"??onclick="myFunction()"/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->

</body>
</html>