テキストを入れ替える

テキストノードの値の変更

DOMでは表示されている文章や文字を「テキスト」といいます。「テキスト」はテキストノードの値であると考えます。したがってウェブページの文章や文字を入れ替えるには「テキストノードの値の変更」をすることになります。

変更するにはどのテキストノードの値を変更するのか指定する必要があります。

たとえば、次のようなテキストがあって、これを「◆変更後のテキスト◆」に変えるには、

これが変更前のテキスト

<p id="nd01">これが変更前のテキスト</p>

変更する

function ndtest01(){
  document.getElementById('nd01').firstChild.nodeValue = "◆変更後のテキスト◆";
}

document.getElementById('nd01').firstChild.nodeValue はとても長いですが、次のような順番でテキストを指定しています。

同じことですが、次の様にも書けます。

変数を使う

ドット( . )を「の」のようにつないでいけば長くなってしまいます。変数を使えば1行を短くできます。わかりやすく書くことができます。

たとえば、次のようなテキストがあって、これを「◆変更後のテキスト◆」に変えるには、

これが変更前のテキスト(その2)

<p id="nd02">これが変更前のテキスト(その2)</p>

変更する

function ndtest02(){
 var ptag = document.getElementById('nd02');
 var textnode = ptag.firstChild;
 textnode.nodeValue = "◆変更後のテキスト(その2)◆";
}

ptagやtextnodeは変数です。変数は自分のわかりやすい名前を作って使うことができます。1文字目は英字、2文字目からは英字または数字を組み合わせます。

変数を使うことで次の様に理解することができますから、わかりやすくなります。

テキストの交換

2つのテキストノードのテキストを交換します。これはテキストノードの値を「読む」方法の確認です。ここでやっていることは大したことではありませんが、ページの目次を自動で作りたい時などに必要になる知識です。

青森県の北には北海道があります。

青森県の南には秋田県と岩手県があります。

run

var ptag03 = document.getElementById('nd03');
var ptag04 = document.getElementById('nd04');
var textnode03 =ptag03.firstChild;
var textnode04 =ptag04.firstChild;
var temp = textnode03.nodeValue;
textnode03.nodeValue = textnode04.nodeValue;
textnode04.nodeValue = temp;

課題 ファイル名 domtext.html

上では2つのテキストノードのテキストを交換しました。これを拡張して3つのテキストを循環して変更するような仕掛けのあるページを作りなさい。

index.htmlからは「3つ交換」という名前のリンクから行けるようにすること。

1. DOMの課題に共通の作成例を参考に「domtext.html」というファイルを作ります。
2. body中に3つのテキストを書きます。指定を単純にするために全部に異なる id をつける方法にしましょう。

   <p id="nd01">青森県の北には津軽海峡があります。</p>
   <p id="nd02">青森県の西には日本海があります。</p>
   <p id="nd03">青森県の東には太平洋があります。</p>
   

   文の内容は各自変更すること。
3. body中にイベントハンドラを持った要素をつくりボタンにします。

   <p class="btn"><span onclick="changetext()">テキストの交換</span></p>
   

4. head部のscryptタグの中に、changetext()スクリプトを書きます。下記は一例です。

   function changetext(){
       var ptag01 = document.getElementById('nd01');
       var ptag02 = document.getElementById('nd02');
       var ptag03 = document.getElementById('nd03');
       var textnode01 =ptag01.firstChild;
       var textnode02 =ptag02.firstChild;
       var textnode03 =ptag03.firstChild;
       var temp = textnode01.nodeValue;
       textnode01.nodeValue = textnode02.nodeValue;
       textnode02.nodeValue = textnode03.nodeValue;
       textnode03.nodeValue = temp;
   }
   

5. いつもの様に、p.btnの中のspanタグがボタンになる様にcssを設定します。(これはやらなくても動作には関係ない。)
6. body部の不要なものを消したり、必要なものを付け加えたりして整えます。