DOMでは表示されている文章や文字を「テキスト」といいます。「テキスト」はテキストノードの値であると考えます。したがってウェブページの文章や文字を入れ替えるには「テキストノードの値の変更」をすることになります。
変更するにはどのテキストノードの値を変更するのか指定する必要があります。
たとえば、次のようなテキストがあって、これを「◆変更後のテキスト◆」に変えるには、
これが変更前のテキスト
<p id="nd01">これが変更前のテキスト</p>
変更する
function ndtest01(){ document.getElementById('nd01').firstChild.nodeValue = "◆変更後のテキスト◆"; }
document.getElementById('nd01').firstChild.nodeValue はとても長いですが、次のような順番でテキストを指定しています。
document.getElementById('nd01') | id="nd01"のエレメントノード |
document.getElementById('nd01').firstChild | id="nd01"のエレメントノードの最初の子ノード |
document.getElementById('nd01').firstChild.nodeValue | id="nd01"のエレメントノードの最初の子ノードの値 |
同じことですが、次の様にも書けます。
document.getElementById('nd01') | .firstChild | .nodeValue |
id="nd01"のエレメントノード | その最初の子ノード | そのノードの値 |
ドット( . )を「の」のようにつないでいけば長くなってしまいます。変数を使えば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文字目からは英字または数字を組み合わせます。
変数を使うことで次の様に理解することができますから、わかりやすくなります。
ptag | id="nd01"のエレメントノード |
textnode | ptagの最初の子ノード |
textnode.nodeValue | textnodeの値 |
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;
上では2つのテキストノードのテキストを交換しました。これを拡張して3つのテキストを循環して変更するような仕掛けのあるページを作りなさい。
index.htmlからは「3つ交換」という名前のリンクから行けるようにすること。
<p id="nd01">青森県の北には津軽海峡があります。</p> <p id="nd02">青森県の西には日本海があります。</p> <p id="nd03">青森県の東には太平洋があります。</p>文の内容は各自変更すること。
<p class="btn"><span onclick="changetext()">テキストの交換</span></p>
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; }