javascriptによるDOMツリー操作の解説
javascriptによるDOMツリー操作の解説をしています。
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
-
DOMとは、HTML・XML などで記述されたドキュメントを、JavaScript言語などのプログラムから参照/更新するために設けられたものである。 あらゆるプログラミング言語にHTML/XML文書の各部へのアクセスを提供するために、W3C によってインターフェイス仕様がまとめられており、 これを有効に活用すれば、より柔軟かつ高度なWebページ表示ができる。 pet.htmlは、javascriptによってＤＯＭツリーを変更操作してＸＭＬ文書を処理し、 html表示したページである。このページでは、pet.htmlで行われているDOMツリーの変更操作に関して説明する。var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = false;
doc.load("sourse2.xml");
まず、XMLファイルをpet.htmlファイルと同じディレクトリに置き、読み込みをする。 最初に、var doc = new ActiveXObject("Microsoft.XMLDOM");という文でMSXMLオブジェクトを作成し、 次のdoc.async = false;XMLという文で、読み込む際に処理が終わるまで次の処理を行わないようにする。これは、asyncプロパティをfalseにすればよい。 そのあとにsourse2.xml読み込む。これで、読み込んだXMLファイルを処理することができるようになる。var nodes = doc.selectNodes("/ウチのペット");
var elt = doc.createElement("誕生日");
elt.text = "9月28日";
var att = doc.createAttribute("元号");
att.text = "平成9年";
elt.attributes.setNamedItem(att); nodes(0).appendChild(elt);最初の行のvarというのはJavaScriptの変数の宣言に必要なものである。 また、同じ行のselectNodesという関数は、任意のノードを起点にしてノードを調べることができたり、要素だけではなく属性を対象に調べることができる関数である。 この関数は<ウチのペット>のノードのリスト（つまり、引数のxPath式にマッチしたノードの集合）を返す。 次の行のcreateElementという関数で<誕生日>というタグを作成し、 elt.text = "9月28日";という文でタグの中身を9月28日にしている。 次の行では、<元号>という属性を作成し、その中身を平成9年にしている。 そして、elt.attributes.setNamedItem(att);という文で先ほど作成した誕生日タグの属性を元号にし、 最後の行で誕生日タグをノードに追加している。参考のため、これらの命令によって今出来上がっているXMLの構造を表すと下のようになる。<ウチのペット>
<名前 呼び方="ゆめ">ゆめこ</名前>
<種類>うさぎ</種類>
<年齢>7才</年齢>
<誕生日 元号="平成9年">9月28日</誕生日>
</ウチのペット>var elt2 = doc.createElement("長所");
elt2.text = "かわいい";
var elt3 = doc.createElement("短所");
elt3.text = "自分のフンを食べる";
nodes(0).appendChild(elt2);
nodes(0).appendChild(elt3);次に、<長所>と<短所>というタグを作る。やり方は先ほどと一緒で、最初の行で<長所>というタグを作り、 elt2.textでその中身を”かわいい”にしている。<短所>も同様に行い、後の2行でそれぞれのタグをノードに追加している。 参考のため、これらの命令によって今出来上がっているXMLの構造を表すと下のようになる。<ウチのペット>
<名前 呼び方="ゆめ">ゆめこ</名前>
<種類>うさぎ</種類>
<年齢>7才</年齢>
<誕生日 元号="平成9年">9月28日</誕生日>
<長所>かわいい</長所>
<短所>自分のフンを食べる</短所>
</ウチのペット>nodes = doc.selectNodes("/ウチのペット/名前");
document.write("名前："+nodes(0).text+"<br />");
var attrs = nodes(0).selectNodes("@呼び方");
document.write("呼び方："+attrs(0).text+"<br />");
nodes = doc.selectNodes("/ウチのペット/種類");
document.write("種類："+nodes(0).text+"<br />");
nodes = doc.selectNodes("/ウチのペット/年齢");
document.write("年齢："+nodes(0).text+"<br />");
nodes = doc.selectNodes("/ウチのペット/誕生日");
attrs = nodes(0).selectNodes("@元号");
document.write("誕生日："+attrs(0).text);
document.write(nodes(0).text+"<br />");
nodes = doc.selectNodes("/ウチのペット/長所");
document.write("長所："+nodes(0).text+"<br />");
nodes = doc.selectNodes("/ウチのペット/短所");
document.write("短所："+nodes(0).text+"<br />");ここからは、処理したXML文書をhtmlに表示する命令を解説する。ここでは、XML文書の一番上のタグから最後までのタグの中身と属性を順番に表示するため、 doc.selectNodes()とdocument.writeを繰り返し用いている。 たとえば、最初の行は<名前>タグの中身を document.write(nodes(0).text);で取り出す。 次の行では<名前>タグの「呼び方」という属性をdocument.write(attrs(0).text);で取り出す。 また、単に中身を取り出すだけでは見栄えが悪いので、改行タグを中に入れるなどして見栄えを整えている。このように、ＤＯＭツリーを変更操作してＸＭＬ文書を処理することで、より柔軟かつ高度なWebページ表示ができるようになる。
