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

个回答

EddieJones: 2016-05-30 20:40:34

这两行代码指的都是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>

伊望岁月

2016-01-13 17:38:19

document.getElementById('table').lastChild;
表示ID为table的标签的最后的一个元素，刚好tbody标签
而<a href="javascript:;" onclick="del(this)">删除</a>的往上第三代祖先元素，也刚好是tbody标签
obj.parentNode.parentNode.parentNode
所以在这个案例是一样

0
qq_看透不说透_0

2016-01-13 17:37:23

获取的都是table

0