写JavaScript报了一个奇怪的错误

Question

我创建了这么一个方法：

    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>

好，现在我的目的是鼠标点击“删除”时，“删除”所在的行就会被删除。
table部分代码如下：

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="f(this)">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="f(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="f(this)">删除</a></td>
    </tr>

该html里只有这一个table，我的问题是为什么不可以把f()方法中的
var table = obj.parentNode.parentNode.parentNode;改成
var table = document.getElementsByTagName("table")[0];。

而且我在验证我的想法的时候发现如果我这么写f()方法，

function f(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
        alert(obj.parentNode.parentNode.parentNode);
    }

这个alert弹出的值居然是null，而
alert(document.getElementsByTagName("table")[0]);弹出的是[object HTMLTableElement]。
给我整晕了，难道不是弹[object HTMLTableElement]才对吗？为啥弹出null是对的。

Answer 1

因为你把 tr 从 dom 节点摘掉了，所以它的 parentNode 为 null