もくじ

タグ中のタグの親子関係に注意

<tr><td>や<ol><li>の場合

「子ノードが複数ある場合」で、<p><span>と並ぶときに改行が入ると改行だけのテキストノードがあると解釈されることを説明しました。そしてこれはブラウザによって解釈が異なることも。

<tr><td><ol><li>の場合も同様な問題があります。

たとえばul要素内にli要素がある場合、ulの開始タグとliの開始タグの間には文字列は入れられないのですが、見やすくするために改行することはよくあることです。この場合その改行をテキストノードにされてしまうのも困ったことですが、そらにブラウザによっても異なるのはもっと深刻です。

調査に使うプログラムはこれ

function ndtest05(target){
   var elnd = document.getElementById(target);
   var childlist =elnd.childNodes;
   for(var i=0 ;childlist.length>i ;i++){
      var item = "has no Child";
      if(childlist[i].hasChildNodes()) item = childlist[i].firstChild.nodeValue;
      alert("ノード番号 : "+i
        +"\nノード名 : " +childlist[i]
        +"\ntitle属性 : " +childlist[i].title
        +"\nノード値 : " +childlist[i].nodeValue
        +"\nchiledNode値 : " +item); 
   }
}

調べるul要素で作られるリストはこれ

これは次の様に改行を入れて作っています。

<ul id="nd05">
<li title="まつ">松</li>
<li title="たけ">竹</li>
<li title="うめ">梅</li>
</ul>

run (ノードの数だけアラートが出ます)

firefoxではこのulには7つのノードが含まれ0,2,4,6が改行だけのテキストノードです。

Noノード名titleノードの値子ノード値
0テキストノードundefined(改行)has no child
1要素ノード(li)まつnull
2テキストノードundefined(改行)has no child
3要素ノード(li)たけnull
4テキストノードundefined(改行)has no child
5要素ノード(li)うめnull
6テキストノードundefined(改行)has no child

ところが次のリストは同じように見えても

これは次の様に改行を入れないで作ってあると、

<ul id="nd06"><li title="まつ">松</li><li title="たけ">竹</li><li title="うめ">梅</li></ul>

run (ノードの数だけアラートが出ます)

このulには3つのノードが子ノードとして存在し、改行だけのテキストノードは含まれません。

Noノード名titleノードの値子ノード値
0要素ノード(li)まつnull
1要素ノード(li)たけnull
2要素ノード(li)うめnull

回避策

この様な場合、「松」という文字列を変更したければ

id="nd05"の要素の2番目の子ノードの子ノードではなく、

id="nd05"の要素の中のliというタグの1番目の子ノードとして指定するとうまくいきます。

以下ではnd05の代わりにnd07で試します。

プログラムです

var elnd = document.getElementById('nd07');
var elis = elnd.getElementsByTagName('li');
var txnd = elis[0].firstChild; 
txnd.nodeValue = "松が替わります";

調べるul要素で作られるリストはこれ

これは次の様に改行を入れて作っている。

<ul id="nd07">
<li title="まつ">松</li>
<li title="たけ">竹</li>
<li title="うめ">梅</li>
</ul>

run


ウェブページ(Feb.2011)
聖愛中学高等学校
http://www.seiai.ed.jp/
Dec.2009 初稿