DOMのchildNodesについて

質問

htmlに　以下divタグ(idというid属性と持つ)をもつ内容を記述しました。

●html
<div id="id"><i>サンプル内容</i>とは</div>

次に、childNodesで取得しようと思うのですが、
　document.getElementById("id").childNodes　と記述した時、

childNodesの戻り値に、返される配列はどうなるのでしょうか？

id[0]は、i要素。
id[1]は、テキストノードとなる。
と本に書いているのですが、

id[2]以降(id[3]、id[4)等]が何になるのかわかりません。

●予想
id[2]は　</i>　
id[3]は　とは

と思い、alertで出力してみたのですが結果がnullになって分からないのです・・・。
どなたか、childNodesの動作をご教授お願いできないでしょうか。
おねがいします。

回答No.2

dscripty · ベストアンサー

DOM を学ぶ前に、もう少し HTML についての理解を深めるといいよ。

まず、基本の復習ね。
HTML の要素は、開始タグではじまって
<要素名

0個以上の属性がつづいて
属性名="属性の値"
属性名="属性の値"
……

開始タグを終えて
>

0個以上の子要素がつづいて

最後に閉じタグでおわるよ。
</要素名>

子要素は
おなじように
開始タグではじまって、
0個以上の属性がつついて
開始タグを終えて
0個以上の孫要素がつづいて
閉じタグでおわるか、

または、1つ以上の文字と空白が続くテキスト要素があるよ。

この基本を、

<div id="id"><i>サンプル内容</i>とは</div>

へあてはめると

id="id" を持つ div 要素の子要素は

"サンプル内容"というテキスト要素を子要素に持つ、i要素
と
"とは" というテキスト要素
の 2個となるね。

つまり、子要素が 2個しかないのに
.childNodes の 3番目の要素を取り出そうとしたから、『無い(null)』がかえってきた、ということ。

ちょっと細かいけど……
.childNodes は要素の配列じゃなくて、NodeList という要素の集合で、

.childNodes.item(0)
.childNodes.item(1)

のように子要素をとりだすよ。

お礼

情報ありがとうございます。
また詳細に書いて頂きありがとうございました。

理解することができました。

回答No.1

hitomura

id[0] = <i>サンプル内容</i>
id[1] = とは
id[2]以降はありません。

xx要素といった場合は<xx>から</xx>までを指します。

お礼

情報ありがとうございます。
要素は、<xx>から</xx>までをさすのですね。

勘違いしておりました。