「子ノードが複数ある場合」で、<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