                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

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

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

羅馬

2016-01-13

源自：JavaScript進階篇 9-22

關注問題我要回答

1413

操作

收起

3 回答

EddieJones
2016-05-30

這兩行代碼指的都是tbody節點對象。

下面這張圖是chrome打開thml文件，按F12顯示的結果，瀏覽器在table標簽下默認添加tbody節點。

table節點對象下有2個子節點：

#text
TBODY

為什么是2個子節點？

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

所以代碼

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

獲取的是tbody節點對象。

測試確認table節點對象下有2個子節點的代碼如下:

<!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>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>

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

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

</table>
<input?type="button"?value="添加一行"??/>???<!--在添加按鈕上添加點擊事件??-->
<input?type="button"?value="測試table節點子節點數量"??onclick="myFunction()"/>???<!--在添加按鈕上添加點擊事件??-->

</body>
</html>