読者です 読者をやめる 読者になる 読者になる

ほげほげ(仮)

仮死状態

element.childNodesについて

JavaScript


IEと他のブラウザで若干の違いがあったので、メモしておきます。


次のようなHTMLがあった場合

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function test1() {
    var childs = document.getElementById('t').childNodes;
    for (var i = 0; i < childs.length; i++) {
        alert(childs[i].nodeName);
    }
}
function test2() {
    var childs = document.getElementById('d').childNodes;
    for (var i = 0; i < childs.length; i++) {
        alert(childs[i].nodeName);
    }
}
function test3() {
    var childs = document.getElementById('d2').childNodes;
    for (var i = 0; i < childs.length; i++) {
        alert(childs[i].nodeName);
    }
}
</script>
</head>
<body>
    <table>
        <tr id="t">
            <td>あああ</td>
            <td>いいい</td>
        </tr>
    </table>
    <div id="d">
        <span>あいうえお</span>
    </div>
    <div id="d2"><span>かきくけこ</span></div>
    <input type="button" value="テスト1" onclick="test1()">
    <input type="button" value="テスト2" onclick="test2()">
    <input type="button" value="テスト3" onclick="test3()">
</body>
</html>

テスト1

○IE

「TD」「TD」とダイアログが表示されます。

○IE以外

「#text」「TD」「#text」「TD」「#text」とダイアログが表示されます。

テスト2

○IE

「SPAN」「#text」とダイアログが表示されます。

○IE以外

「#text」「SPAN」「#text」とダイアログが表示されます。

テスト3

○IE

「SPAN」とダイアログが表示されます。

○IE以外

「SPAN」とダイアログが表示されます。



上の結果からどうやらIE以外のブラウザはHTML上での空白もchildNodesで必ず取得するみたいです。


ただ、謎なのがIEでのテスト1とテスト2の結果の違いです。

<div>のパターンは空白も取得したのに、<TR>の場合は空白を取得していませんでした。

取得のしかたも<div>場合は<SPAN>タグの前の空白は取得していませんでした。


対応策としては、HTMLから不要な空白を除去するか、nodeName等で判断して処理する感じになると思います。


また、今回はIE8とChromeSafariFirefoxOperaで動作確認しました。

おそらく、IE6、7でもIE8と同じ現象になると思われます。


やはりIEだけ仲間はずれですねー・・・