关于table元素最后一个子节点的问题

最近在慕课网上学习javascript，编写练习代码，需要删除表格里的一行。参考代码的删除函数是：

function deleteRow(obj){
        var tbody = document.getElementById('table').lastChild;  
        var tr = obj.parentNode.parentNode;
         tbody.removeChild(tr);
     }

表格布局代码如下：

<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:remove(this);" >删除</a></td>   
           <!--在删除按钮上添加点击事件  -->
       </tr>

       <tr>
          <td>xh002</td>
          <td>刘小芳</td>
          <td><a href="javascript:remove(this);" >删除</a></td>   
           <!--在删除按钮上添加点击事件  -->
       </tr>  

</table>

学习的时候一直没看懂为什么要获取table元素的最后一个子节点，后来查阅了资料，搞明白了。

table的子元素不是<tr>，是text节点和tbody节点，<tr>在tbody节点里。所以，删除按钮所在的标签的父节点的父节点是<tr>。

2020/5/17 补充：table内的标签元素

<table>
    <caption></caption><!--表格的标题-->
    <thead>
        <tr>
            <td></td>
        </tr>
    </thead><!--表格的表头-->
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody><!--表格的表体-->
    <tfoot></tfoot><!--表格的表足-->
</table>