今回でDOMの紹介を終わると言っても、これまでにDOM1-
Coreのすべてを紹介できたわけではなく、またDOM1-Core
自体もDOMのほんのさわりの部分に過ぎない。
とはいえ、DOM2,DOM3を利用する時にDOM1-Coreを使える
ことは必須と言っても良いわけで、わからなくなった時には、
是非これまでのサンプルを動かしてみて欲しい。
現在一般に使われているブラウザにはDOMが必ず実装さ
れており、それをJavaScriptで操作できるのは当り前とい
う時代になってきている。したがって、今後の連載の中で
も必要に応じてそれらの紹介は行って行くことになる。
また、CD-ROM内にはDOMの各バージョンの仕様へのリンク
も用意されているので是非参考にして欲しい。
さて、今回のTextインターフェイスはこれまでに紹介
してきたいろいろなインターフェイスの中のCharacterData
を表している。メソッドがひとつだけの簡単なインター
フェイスだ。そして、もうひとつのloadメソッドはDOM3
のものだがXMLファイルをダイナミックにロードし、今ま
で紹介してきたDOMの命令で処理することのできる便利な
メソッドだ。今回は、このloadメソッドのクロスブラウザ
な使い方を紹介したい。
ページ構築後にも自由にXMLファイルをロードし処理で
きるloadメソッドは、今まで扱ってきたDOM命令でいきな
り簡単にワンランク上のサイトを構築できる魔法のメソッ
ド?といえるかもしれない。
今回のテーマのポイント
1.Textインターフェイスの命令を確かめる
2.類似命令についての確認
3.DOM3のloadメソッドを使ってみる
splitTextとsplitとsubstringData
Textインターフェイスのメソッドと類似命令について確認してみよう。
■splitTextメソッド
Textインターフェイスは、Element や Attr
に含まれるCharacterDataをあらわしている。
TextインターフェイスにはDOM1ではメソッド
がひとつあるだけだ。Textノードを２つのText
ノード分割にする「splitText」メソッドで、
分割する位置は引数でoffset指定し0から数え
始める方式だ。
たとえば、splitText(2)で「あいうえお」
という内容のTextノードを分割すると「あ」
を0、「い」を1、「う」を2と数えていって
3文字目である「う」の<<手前>>で分割されて、
「あい」と「うえお」という二つのノードが
できあがる。分割されたノードは、offsetの
手前の地点「あい」までの内容だけを含むこと
になり、offset以降の部分「うえお」は次の
兄弟ノードとして挿入されることになっている。
ただし、このようにタグなしで分割された
TextノードはHTMLやXML的にはその分割状態を
表す方法がないのでDOM編集中には存在しても
永続性はないことに注意が必要だ。
ちなみに、normalizeメソッド(DOM1ではEle
mentインターフェイスだったがDOM2からはNode
インターフェイス)を使うとこの分割状態を解消
してひとつのTextノードに戻すことができる。
これは、DOM編集後にDOMツリーを辿る作業を
したいなどといったときに編集中のツリーの
複雑さを解消する便利なメソッドだ。
まあ、何はともあれ、サンプルをみてみよ
う。ボタンクリックするとTextノードが5文
字目で分割されるというものだ。
ボタンをクリックすると、「こんにちはお
元気ですか?」の「お」の手前で分割されて
対象のノードデータが「こんにちは」に変わ
っているのがわかるだろう。
<script type="text/javascript">
<!--
function splitData(idName,index)
{
//1 id名がidNameのエレメントのfirstChildを変数fcへ入れる
var fc = document.getElementById(idName).firstChild
//2 index文字目でTextノードを分割する
fc.splitText(index)
//3 dataを調べる
alert(fc.data)
}
//-->
</script>
<p id="test0">こんにちはお元気ですか?</p>
<form>
<input type = "button"
value = "Textノードを５文字目で分割する"
onclick = "splitData('test0',5)">
</form>
( *indexは1文字目を0番目として数える。)
↑このスクリプトサンプル ./sample/f1.htm
【f1.htmの動作ブラウザ】
win mac linux
n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3
○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
■setAttributeとsetAttributeNode
JavaScriptにはsplitというメソッドがあって
名前はにているが動作は異なっている。これは、
引数で文字列を分割した配列を返すものだ。
従来のJavaScript命令で比較するならむしろ、
指定された開始位置から終了位置にある文字
列を返すsubstringなどが似ているかもしれな
い。たとえば、substring(0, 5)は文字列の
頭から5文字目までを取り出すので、上のサン
プルに似た動作をするといえる。
しかし、substringが取り扱うのが文字列
そのもので、たとえば
testStr = 'あいうえおです'
testStr.substring(0, 5)
のように直接文字列を扱う【サンプルf1_2.htm】
のに対して、splitTextはあくまでDOMのノー
ドを対象にした処理なので、
oj=document.getElementById('test')
testNode = oj.firstChild
testNode.splitText(5)
という具合にDOMを取り扱う時に便利なメソ
ッドとなっている【サンプルf1_3.htm】。
【f1_2.htmの動作ブラウザ】
win mac linux
n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
【f1_3.htmの動作ブラウザ】
win mac linux
n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3
○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
さらに、DOMの中にもsubstringDataという
似たようなメソッドがあるが、これは文字列
を取り出すだけでノードの分割までは行わな
い。f3.htmのサンプルで確認してみよう。
こちらのノードデータはsubstringDataで
処理後も最初のままになっている。
<script type="text/javascript">
<!--
function test_substringData(idName,index)
{
//1 id名がidNameのエレメントのfirstChildを変数fcへ入れる
var fc = document.getElementById(idName).firstChild
//2 substringDataで0番目から5文字取り出してみる
alert( fc.substringData(0,5) )
//3 fcノードそのものは分割されていない
alert( fc.data )
}
//-->
</script>
<p id="test0">こんにちはお元気ですか?</p>
<form>
<input type = "button"
value = "文字列を５文字目で分割する"
onclick = "test_substringData('test0',5)">
</form>
↑このスクリプトサンプル ./sample/f2.htm
【f2.htmの動作ブラウザ】
win mac linux
n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3
○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
DOM3のloadメソッドについて
DOM2以降に追加された命令のなかにもいろいろ使えるものがある
■メソッドload
これまで解説してきたDOM1ベースのJavaScript
は外部ファイルとのアクセスには.jsファイルを
使うしかなかった。また、ページ構築後に読み込
もうと思ったらフレームを使ったり、ダイナミッ
クロード用の特殊なクロスブラウザ関数などを
用意する必要もあった。
しかし、DOMにはXMLをダイナミックに読み書
きするためのDocumentLSインターフェイスがあ
らかじめ用意されている。そのなかでもおなじ
みなのがloadメソッドだ。このインターフェイ
スが含まれるDOM3 - Load and Save は2003.6
.19付けでまだ草案だがload自体はIEのActiveX
として実装されていたので使った事のある方も
少なくはないだろう。
今回は、これをIEだけではなくクロスブラウ
ザで動かす方法を紹介しておく。
外部のXMLファイルを自由に読み込めること
でこれまで紹介してきたさまざまな命令がいき
なりダイナミックな処理能力を手に入れること
になるからだ。
では、さっそくサンプルを見てみよう。
下記XMLファイルdata.xmlをボタンクリックで
読み込み、HTML内へ書き出すというものだ。
【load1/data.xml】(*文字エンコードはutf-8です)
<?xml version="1.0"?>
<root>
<node>むかしむかし</node>
<node>あるところに</node>
<node>おじいさんと</node>
<node>おばあさんが</node>
<node>とんでました。</node>
</root>
【load1/load.htm】
<script type="text/javascript">
<!--
/*==========================================================
//クロスブラウザ load関数
引数 : url XMLファイルのurl
func 読み込み成功時の起動関数名
戻値 : 読み込まれたXMLノードツリー
例 : loadFile( 'data.xml', func1 )
function func1(){alert('test')}
Support http://game.gr.jp/js/
*/
function loadFile(url,func)
{
if (window.ActiveXObject)
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async = false
if(xmlDoc.load(url)){func(xmlDoc)}
} else if ( document.implementation &&
document.implementation.createDocument )
{
var xmlDoc = document.implementation.createDocument("","",null)
xmlDoc.onload = function (){func(xmlDoc)}
xmlDoc.load(url)
}
return xmlDoc
}
//読み込んだXMLのデータをもとにHTMLへ書き出す
function writeXMLData(xdoc)
{
//XML内の"node"という名前のタグの配列を作る
var wknode = xdoc.getElementsByTagName("node")
//書き出すためのdivを作っておく
var wkaaa = document.body.insertBefore(
document.createElement("div"), document.body.firstChild)
//"node"タグが出てきた順に処理する
for( i = 0 ; i < wknode.length ; i++ )
{
//各タグ内のfirstChildのデータだけをinnerHTMLで書き出す
wkaaa.innerHTML += wknode[i].firstChild.nodeValue + '<br>'
}
}
//-->
</script>
<input type = "button"
value = "XML読み込み"
onclick= "loadFile('data.xml',writeXMLData)">
↑このスクリプトサンプル ./sample/load1/load.htm
