关于JavaScript元素选取的一些疑惑。

Question

   function removeTr(obj){          var tbody = document.getElementById("table").lastChild;          var tr = obj.parentNode.parentNode;          tbody.removeChild(tr);      }http://www.imooc.com/code/1636我的理解：其中的删除函数，定义的第一个tbody变量选中的应当是表格中的最后一个元素，即最后一个tr，第二行tr变量选中的是点击“删除”链接以后父节点的父节点(a->td->tr),即该“删除”链接所在的行；问题如下：如果点击的不是最后一行，那么按照我的理解，对应的tr元素也是不相同的，但是通过这个函数却确实能起到删除子节点的效果，为何？两次选取对应的应当是同级的元素，却能通过操作tbody的子节点来删除任意行，这又是为何？如果我的理解有误，还希望能够指出。感谢大家的解答！

Answer 1

其实完整的表格是这样的

<table id="table">
    <tbody>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
    
        <tr>
            <td>xh001</td>
            <td>王小明</td>
            <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>
    
        <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>
    </tbody>
</table>

他还有一层tbody,你不加浏览器会加上去的。所以document.getElementById("table").lastChild;得到的就是这个 tbody标签，它是所有tr的父标签。obj.parentNode.parentNode 它取到的就是当前行的tr,所以就可以解释通了。

Answer 2

table在渲染的时候会在tr标签外面再添加一层<tbody>标签

var tbody = document.getElementById("table").lastChild;这句实际就是取得这个元素，也就是tr的父标签，

所以tbody.removeChild(tr);这句就是父标签tbody删除子标签tr

这样写不严谨，你从哪里找的，找个好一些的代码去研究

Answer 3

为什么还要表格布局？