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
--------------------------------------------------------------------
|