残念ながら、次の操作はできません。
var tmp =koko.firstChild; koko.firstChild = koko.lastChild; koko.lastChild = tmp;
nodeValue(それもテキストノードに限る)を交換する必要があります。
var tmp =koko.firstChild.nodeValue; koko.firstChild.nodeValue = koko.lastChild.nodeValue; koko.lastChild.nodeValue = tmp;
エレメントノードにはValueがありませんから、firstChildとlastChild共にテキストノードでなければなりません。
<p id="nd16">★<em>最初</em>と<em>最後</em>のノードを交換する例。
★最初と最後のノードを交換する例。
実行
function chgFstLst(){ var koko = document.getElementById('nd16'); var tmp =koko.firstChild.nodeValue; koko.firstChild.nodeValue = koko.lastChild.nodeValue; koko.lastChild.nodeValue = tmp; }
ノードそのものを操作する方法もありますが、あとで学びます。
function nodecount(koko){ var childlist = koko.childNodes; var z = childlist.length; if (koko.lastChild.nodeValue==null) { var txt = koko.lastChild.firstChild.nodeValue; koko.lastChild.firstChild.nodeValue = txt + "[" + z + "]"; }else{ var txt = koko.lastChild.nodeValue; koko.lastChild.nodeValue = txt + "[" + z + "]"; } }
以下には様々なpタグに書かれた内容がありますが、それぞれにイベントハンドラがあります。thisを使ってクリックされたタグのノードの数を最後のノードに書き加えます。例えば最初は以下の様になっています。
<p onclick="nodecount(this)">複数の<em>子ノード</em>を持つノード</p>
複数の子ノードを持つノード
spanタグに挟まれemタグに挟まれまたspanタグに挟まれ
spanタグに挟まれ emタグに挟まれ またspanタグに挟まれ
イメージタグも一つのエレメントノードです。ここはemそしてここもem。結局このpタグのノード数は6ということになります。
最後のノードがテキストノードでなくエレメントノードというのにもこのスクリプトは対応しています。ただし、子ノードとしてテキストノードを持つエレメントノードでなければなりません。たとえばemタグなど
イメージタグは子ノードにテキストノードを持ちませんからこの例ではうまく動きません。
でもイメージタグの後に改行を入れるとそれも子ノードになって、しかもテキストノードですからうまく動きます。