为什么要加lastChild呢？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么要加lastChild呢？

来源：9-22 编程练习

慕函数9642432

2016-07-24 08:48

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

写回答关注

5回答

l_yanlei

2016-08-02 14:46:05

已采纳

我也很不明白。查了一下，有个方法倒是值得推荐。那就是看看<table>标签下的子节点到底是什么。
以下就是获得<table>标签下所有的子节点，然后遍历输出子节点的nodeName,nodeValue,nodeType。发现，<table>的子节点有两个，一个是“#text”，一个是“TBODY”。
“#text”的类型为3（文本节点）,值是空的，所以应该是<table>和<tbody>之间的空格或者换行部分。
"text"之后的节点就是<Tbody>，而<tr><td><th>这些都是在<tbody>里的，所以要删除表格中的某一行，就得先取得<tbody>节点，也就是<table>的lastChild这个节点了。

1 1

慕函数964...

非常感谢！

2016-08-03 14:44:37

共 1 条回复 >
就爱扯草草

2016-07-26 11:16:08

靠,我也想了好久才貌似弄明白了:
因为table标签的childNodes不是tr而是tbody, 这里虽然省略了tbody没有写, 但是它还是实际存在的

0 3
yemaa

2016-07-25 11:45:08

获取最后的子节点

0 0
慕函数9642432

2016-07-24 14:28:56

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
   window.onload = function(){
       Highlight();
   }
   function addOne(obj){
        var tbody = document.getElementById('table').lastChild;
       var tr = document.createElement('tr');

       var td = document.createElement("td");
       td.innerHTML = "<input type='text'/>";
       tr.appendChild(td);

       td = document.createElement("td");
       td.innerHTML = "<input type='text'/>";
       tr.appendChild(td);

       td = document.createElement("td");
       td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";
       tr.appendChild(td);

       tbody.appendChild(tr);
       Highlight();
    }

   function deleteRow(obj){
        var tbody = document.getElementById('table').lastChild;
       var tr = obj.parentNode.parentNode;
       tbody.removeChild(tr);
   }
   function Highlight(){
       var tbody = document.getElementById('table').lastChild;
       trs = tbody.getElementsByTagName('tr');
       for(var i =1;i<trs.length;i++){
           trs[i].onmouseover = function(){
               this.style.backgroundColor ="#f2f2f2";
           }
           trs[i].onmouseout = function(){
               this.style.backgroundColor ="#fff";
           }
       }
   }

</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="deleteRow(this)">删除</a></td>
       </tr>

       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="addOne()" />
</body>
</html>

0 0
Acer3641222

2016-07-24 12:59:58

document.getElementById('table')获取到的是<table>标签，而tbody是<table>的子标签

1 0

慕函数964...

要获得的不就是<table>标签吗

2016-07-24 14:27:41

共 1 条回复 >