var tbody = document.getElementById('table').lastChild; 这个到底是指哪个
var tbody = document.getElementById('table').lastChild;
这个到底是指哪个。为什么他和 obj.parentNode.parentNode.parentNode是一样的？
罗马
2016-01-13
3 回答
这两行代码指的都是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>
举报
0/150
提交
取消
