JavaScript Examples
第25回 CharacterDataを効果的に活用する

 CharacterDataはDOMの中のキャラクタデータにアクセ スするためのものだ。文字列を追加したり削除したり置 き換えたりするためのメソッドとアトリビュートが用意 されている。今回はこれまで紹介してきた文字を操作す る方法とも比べつつCharacterDataを具体的に操作してみる。



 HTMLページのコンテンツといえば、メインはなんとい
っても「文字列」だ。ページを丸ごと画像で作るのでも
なければ(笑)文字無しでページの意図を伝えることは難
しい。

 CharacterDataインターフェイスはDOM内の文字データ
を制御するためのもので、これを使えば、ページの中の
どの文字列でも操作できるようになる。

 新しく文字を追加することも、位置と文字数を決めて
削除したり置き換えたり取り出したりすることも、場所
を決めて好きな文字を挿入することもできる。

 前回も述べたが、DOMは同じ機能を実現するために複数
のアプローチを用意しており、この文字列操作について
も別の方法がある。今回は、以前に紹介したNodeインター
フェイスでの方法と簡単に比較しながら具体的な使い方
を紹介していく。

 ブラウザの実装に依存している部分などに気をつけれ
ば、目的に応じてどの方法を使うかは制作者の自由だ。
 DOMの使い方のいろいろな方法を知ることで応用力を
つけていこう。

今回のテーマのポイント
 1.各メソッドとアトリビュートについて  2.appendDataとappendChildとの比較  3.appendDataを使ったサンプル
CharacterDataのメソッドとアトリビュートについて CharacterDataインターフェイスで利用できるいくつかの命令について確認しておこう。 ■CharacterDataを使ってみる  CharacterDataインターフェイスにはつぎの 通り2つのアトリビュートと5つのメソッドと が定義されている。 アトリビュート data length メソッド appendData(追加する文字列) deleteData(開始位置,文字数) insertData(開始位置,挿入する文字列) replaceData(開始位置,文字数,置換文字列) substringData(開始位置,文字数)  アトリビュートのdataは文字通りデータであ りここでは文字列だ。lengthは文字の数だが、 0という場合もある。つまり、文字が空という 状態をあらわすわけだ。  では、CharacterDataを利用して文字列を取 り出す簡単なサンプルをみてみよう。  ボタンをクリックするとpタグの中の文字列 「こんにちは」がダイアログ表示される。
<script type="text/javascript"> <!--
function getData(idName) {
  //1 id名がidNameのエレメントのfirstChildを変数fcへ入れる   var fc = document.getElementById(idName).firstChild
  //2 fc内のdataをダイアログ表示する   alert( fc.data )
}
//--> </script> <p id="test0">こんにちは</p> <form> <input type    = "button"          value   = "キャラクタデータを取得する"        onclick = "getData('test0')"> </form>

↑このスクリプトサンプル ./sample/f1.htm ↑このスクリプトの関連サンプル ./sample/f2.htm
 --------------------------------------  書式:  oj.data  オブジェクト:  oj     対象CharacterData  説明:  文字データを取得/設定する  戻り値:文字列  仕様 DOM1,2,3 /Core/CharacterData  --------------------------------------  書式:  oj.length  オブジェクト:  oj     対象CharacterData  説明:キャラクタ数。0なら空ということ。  戻り値:数値 長整数型  仕様 DOM1,2,3 /Core/CharacterData  --------------------------------------  書式:  oj.appendData(文字列)  オブジェクト:  oj     対象CharacterData  引数:  文字列   追加する文字列  説明:  引数によって指定された文字列を追加する。  dateとlengthは変更を反映する。  戻り値:なし  仕様 DOM1,2,3 /Core/CharacterData  --------------------------------------  書式:  oj.deleteData(開始位置,文字数)  オブジェクト:  oj     対象CharacterData  引数:  開始位置  除去を開始する位置  文字数   削除する文字数(開始位置と文        字数の合計がlengthを超える場        合はキャラクタすべてを削除)  説明:  引数によって指定された範囲の文字列を  削除する(開始位置は0から数える)。  dateとlengthは変更を反映する。  戻り値:なし  仕様 DOM1,2,3 /Core/CharacterData  --------------------------------------  書式:  oj.insertData(開始位置,文字列)  オブジェクト:  oj     対象CharacterData  引数:  開始位置  除去を開始する位置  文字列   挿入する文字列  説明:  引数によって指定された位置に文字列を挿入  する。  戻り値:なし  仕様 DOM1,2,3 /Core/CharacterData  --------------------------------------  書式:  oj.replaceData(開始位置,文字数,文字列)  オブジェクト:  oj     対象CharacterData  引数:  開始位置  置換を開始する位置  文字数   置換する文字数(開始位置と文        字数の合計がlengthを超える場        合はキャラクタすべてを置換)  文字列   置換する文字列  説明:  引数によって指定された範囲の文字列を置換  する。  戻り値:なし  仕様 DOM1,2,3 /Core/CharacterData  --------------------------------------  書式:  oj.substringData(開始位置,文字数)  オブジェクト:  oj     対象CharacterData  引数:  開始位置  取り出しを開始する位置  文字数   取り出す文字数  説明:  引数によって指定された範囲の文字列を取り  出す。  戻り値:取り出した文字列(開始位置と文字数  の合計がlengthを超える場合はキャラクタす  べてを返す)  仕様 DOM1,2,3 /Core/CharacterData  -------------------------------------- appendDataとappendChildはどう違う? CharacterDataインターフェイスのappendDataは文字列に 新しい文字列を追加することができるが、appendChild による文字列追加との違いを実際のサンプルで比較してみる。 ■appendDataを使ってみる  下記のサンプルはボタンクリックでpタグ 内の文字列「こんにちは」の後ろへ「DOM太郎 です」という文字を追加するものだ。追加さ れたあとdataには「こんにちはDOM太郎です」 という結合された文字列が入っていることが わかる。 win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ × ○ ○ ○ ○ × ○ ○ ○ ○

<script type="text/javascript"> <!--
function adData(idName,text) {
  //1 id名がidNameのエレメントのfirstChildを変数fcへ入れる   var fc = document.getElementById(idName).firstChild
  //2 fc内のdataに文字列を追加する   fc.appendData(text)
  //3 dataを調べる   alert(fc.data)
}
//--> </script> <p id="test0">こんにちは</p> <form> <input type    = "button"          value   = "文字列を追加する"        onclick = "adData('test0','DOM太郎です')"> </form>

↑このスクリプトサンプル ./sample/f3.htm
■appendChildを使う方法と比べてみよう  そこで、同じ文字列を追加する別の方法と 比べてみたい。下記は以前紹介したcreateTextNode でテキストノードを生成し、それをappendChild で追加するという方法だ。 win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ × ○ ○ ○ ○ △ ○ ○ ○ ○ * mac-e5.0は不可(文字化け) mac-e5.2はOK
<script type="text/javascript"> <!-- function adData2(idName,text) {   //1 id名がidNameのエレメントを変数elemntへ入れる   var element = document.getElementById(idName)   //2 elementの子として文字列を追加する   element.appendChild(document.createTextNode(text))   //3 dataを調べる   alert(element.childNodes.item(0).data)   alert(element.childNodes.item(1).data) } //--> </script> <p id="test0">こんにちは</p> <form> <input type    = "button"          value   = "文字列を追加する"        onclick = "adData2('test0','DOM太郎です')"> </form>

↑このスクリプトサンプル ./sample/f4.htm
 ボタンクリックすると「DOM太郎です」とい う文字列が追加され、目で見える結果は同じ だ。しかし、実はDOM的には同じではない。 MozillaのDOM Inspectorなどで表示してみると 一目瞭然なのだが、appendDataの方は P--#text (こんにちはDOM太郎です) のようにpタグの下にひとつのテキストノード があるだけだが、appendChildではもともと あった「こんにちは」というノードの後ろに もうひとつ「DOM太郎です」というノードが 追加された形になっている。 P-+-#text (こんにちは) | +-#text (DOM太郎です)  つまり、appendChildは子ノードを追加する のに対してappendDataはあくまで対象のテキ ストノードそのものに対して文字データを追加 連結するということなのだ。 応用サンプル  今回のappendDataを使って読み物を出力するスクリプトを作ってみた ◎ ./sample/sample1.htm   ボタンクリックで順次文章が追加される   あらかじめ、配列に連番をつけて用意した物語をボタンクリック   で順次appendDataしている。 ◎ ./sample/sample2.htm   文章が自動的に一文字づつ書き出される   sample1との大きな違いは、文章を一度一文字ずつに分解して、   インターバルタイマーで100/1000秒ごとに自動で順次追加すし   ていることだ。setInterval()内の第二引数100が描画間隔なの   で、それをたとえば1000にすれば1秒ごとの出力になる。 ◎ ./sample/sample3.htm   複数の物語を切り替えて自動書き出しする      複数の物語をそれぞれ.js外部ファイルの中に変数として持ち、   ボタンで切り替えて書き出している。書き出す前に、追加済   みのテキストノードの不要な部分をdeleteDataを利用して   削除している。   参考:deleteDataの基本サンプル ./sample/f5.htm //////////////////////////////////////////////////////////////////// *上記サンプルの動作環境は各サンプルをご確認ください ==================================================================== 凡例 Win n3 -- NetscapeNavogator 3.x n4 -- NetscapeNavogator 4.x n6 -- NetscapeNavogator 6.x n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x e4 -- Internet Explorer 4.x e5 -- Internet Explorer 5.x e6 -- Internet Explorer 6.x o6 -- Opera 6.0 o7 -- Opera 7.0 Mac n3 -- NetscapeNavogator 3.x n4 -- NetscapeNavogator 4.x n6 -- NetscapeNavogator 6.x n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x e4.5 -- Internet Explorer 4.5 e5 -- Internet Explorer 5.0 または 5.1 s1 -- Safari Linux n3 -- NetscapeNavogator 3.x n4 -- NetscapeNavogator 4.x n6 -- NetscapeNavogator 6.x n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x k3 -- Konqueror 3.x --------------------------------------------------------------------




●JavaScript 資料




Toshirou Takahashi tato@fureai.or.jp