罠とは

htmlのテーブルのdom操作について、罠があります。端的に言いますと、テーブルの木構造のことですが、どうも隠れている要素があり、それを無視してしまうと、うまくDOM操作できません。
通常ですと、以下のhtmlコードについて

<!doctype html>
<html>

<head>
    <title>test</title>
</head>

<body>
    <table id="aaaaa">
        <tr>
            <td>test1</td>
            <td>test2</td>
        </tr>
        <tr>
            <td>test3</td>
            <td>test4</td>
        </tr>
    </table>

    <script type="text/javascript">
        var tbody = document.getElementById('aaaaa').childNodes[1];//tbody
        console.log(tbody);

        var children = tbody.childNodes;
        var tr = children[0];
        tbody.removeChild(tr);
    </script>
</body>

</html>

木構造の認識違い

木構造はこのようなものかと思われますが、実は違います。

実際にはこうです：

tbodyというのが出てきます。詳しくはhtmlの知識となりますので、ここでは割愛します。
要は上記のhtmlコードで書いてあるように、removeChildをうまいことに正しいDOMオブジェクトをセレクトしないと、エラーが出てきてしまい、子ノードを削除できないのです。

ちなみに、上記コードでは、以下の結果が出てきています。


console.log(document.getElementById("aaaaa").childNodes);
//結果：NodeList(2) [text, tbody]

これはchildNodes[1]を採用した理由です。childNodes[0]を使うと、textノードを選んでしまって、removeChildは到底できなくなりますので、気をつけてください。　
このテキストノードはおそらく改行なのではないでしょうかね。
正確なremoveChild方法はすでに上記コードに記載しました。ご参考まで。

htmlテーブルのDOM操作の罠

罠とは

木構造の認識違い