学 JS 碰到的一个问题

This topic created in 2157 days ago, the information mentioned may be changed or developed.

有这么一个方法：

  function f(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }```
它的调用者是这样的：
`<a href="javascript:void(0);" onclick="f(this)">删除</a>`

我的目的是点击删除，就会删除该链接所在的当前行，问题来了，f()方法里为什么把
`var table = obj.parentNode.parentNode.parentNode;`替换成
`var table = document.getElementsByTagName("table")[0];`时就报错了呢？这个 html 里只有一个 table，这样获取应该没问题吧。。。

4 replies

zzybot1996

Jul 17, 2020

新发现，在 f()中加了这么一行，
`alert(document.getElementsByTagName("table")[0]);`点删除后网页会弹出[object HTMLTableElement]。
改成：
`alert(obj.parentNode.parentNode.parentNode);`点删除后居然弹出的是 null 。。。。

SilentDepth

Jul 17, 2020

对于这样一个结构：

<table>
__<tbody>
____<tr>
______<td>
________<a href="..." onclick="...">

<a>.parentNode.parentNode.parentNode 和 document.getElementsByTagName('table')[0] 是同一个元素吗？

zzybot1996

Jul 18, 2020 via Android

@SilentDepth 我不知道<tbody>是什么。。能跟我大概说说吗？

之后我又用 alert(obj.parentNode.parentNode.parentNode);运行了一下，发现返回的是 TableSectionElement,是不是就是<tbody>呢？

document.getElementsByTagName('table')[0]
返回的是 TableElement

zzybot1996

Jul 18, 2020 via Android

@SilentDepth 查了一下 tbody,
每个表格可以有一个表头、一个表尾和一个或多个表体，分别以 THEAD 、TFOOT 和 TBODY 元素表示。
用 TBODY 这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>

大概明白什么意思了，明天再仔细查查，话说我看的视频里面老师都没讲这个。。

感谢您的回复！