NodeListのサンプル

サンプル1

1

2

2.5

3

ソース1

<div class="sample" id="smp">
<p>1</p>
<p>2</p>
<p><em>2.5</em></p>
<p>3</p>
</div>
function childelements(){
  ndlist = document.getElementById('smp').childNodes;
  for(i=0;i<ndlist.length;i++){
    alert(ndlist.item(i).nodeName);
  }
}

配列系のプログラムでよく見る用途です。forの第2文でlengthを使って、for内部でitem(i)とか書きます。

ちなみにECMAScriptではforループの書き方をfor(i in ndlist)なんてしてもいいようですが、 DOM要素に対してこれを使うと配列以外の属性(やメソッド)も処理されたりするのであまり使い道なさそうです。

【書く項目が違う気がする】ブラウザによって差がでるようですが、これを実行すると、 「P」「P」「P」「P」と出るものと「#text」「P」「#text」「P」「#text」「P」「#text」「P」「#text」と出るものとあるようです。 つまり空白文字(含む改行)をテキストノードとして扱うかどうかの流儀の差です。 どっちが正しいのやらよくわかりませんが(どちらかというと後者な気がする)、 少なくとも現状でP要素にだけ処理がしたい場合は、クロスブラウザを念頭に置いたとき、 childNodesではなくてgetElementsByTagname('p')が確実です。