2011年07月17日に投稿

[Javascript] ChildNodes の挙動が IE と Firefox & Chrome で違う

element.childNodes とすると対象のエレメントの子ノードリストにアクセスすることができますが、IE と Firefox & Chrome とで挙動が違いました。具体的な違いは下記のサンプルコードを見て頂けると分かりやすいです。


下記のコードは id 「 hoge 」の子ノードの要素番号1のノード(つまり2番目のノード)にアクセスして中身の HTML を表示させるコードです。この実行結果は IE と Firefox & Chrome で異なります。これを実行すると IE では「2個目」と表示され、Firefox & Chrome では「1個目」と表示されます。
[html]





  • 1個目
  • 2個目
  • 3個目
  • 4個目
  • 5個目



[/html]

なぜ違いが発生しているのかを調べたところ、Firefox & Chrome では改行コードもノードとして扱われるようです。document.getElementById(‘hoge’).childNodes[0] を Firebug で確認してみると改行コード(\n)になっているのが分かります。document.getElementById(‘hoge’).childNodes[0].innerHTML とやると undefined になっていまいます。1個目の li と2個目の li の間にも改行がありますので、document.getElementById(‘hoge’).childNodes[2].innerHTML も undefined です。childNodes を使う場合はブラウザでの挙動の違いに気を使わなければなりませんね。

関連記事

Leave a Reply