もくじ

テキストノード変更サンプル

firstChildとlastChildを交換

残念ながら、次の操作はできません。

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タグなど

イメージタグは子ノードにテキストノードを持ちませんからこの例ではうまく動きません。

でもイメージタグの後に改行を入れるとそれも子ノードになって、しかもテキストノードですからうまく動きます。


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