DOMツリーにアクセスする

DOMツリーにアクセスする

■　DOMツリーのノードの情報を取得する

まず、数のようなＤＯＭツリーの構造を持つＸＭＬ文書、「kensaDOM.xml」を例にとって、ノード情報の取得を説明します。

図2-3　ＤＯＭツリーとノードの関係

この図では、comment、title、name、date、home、mail、optionがＤＯＭツリーのノードになります。この中で、ルートにあるcommentはルートノードになります。

図2-3をＸＭＬインスタンスと記述するとリスト2-1のようになります。

リスト2-1　kensaDOM.xml

<?xml version="1.0" encoding="Shift_JIS" ?>
<comment>
　　　 <title>患者Ａ　Ｘ線</title>
　　　 <name>検査技師　Ｎ</name>
　　　 <date>2007/08/01</date>
　　　 <home>seikei-0801</home>
　　　 <mail>n-ken@hosp.gr</mail>
　　　 <option>右下肺野に直径２．５ｃｍの薄い輪状陰影があり、その中の肺門側の下部に凸凹のある腫瘤状陰影がある</option>
</comment>

次に、ＤＯＭツリーにアクセスするＨＴＭLファイルの基となるひな形を記述してみましょう。

リスト2-2　DOM1.html　---　DOMツリーへのアクセスで使うHTMLファイルの雛型

<HTML>
<HEAD>
<META http-equiv="Content-Script-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>DOM1</TITLE>
<STYLE type="text/css">
.text
{
　　　background: #0000ff;　　　　　　　　　　　　　　 /*　背景色　*/
　　　border-bottom: white 1px solid;　　　　　　　　 /*　下枠の幅　*/
　　　cursor: hand;　　　　　　　　　　　　　　　　　　　　　 /*　カーソルのタイプ　*/
　　　color: white;　　　　　　　　　　　　　　　　　　　　　　 /*　文字色　*/
　　　font-family: 'sans-serif';　　　　　　　　　　　　　　 /*　フォントファミリ　*/
　　　font-size: 12pt;　　　　　　　　　　　　　　　　　　　　 /*　フォントサイズ　*/
　　　font-weight: normal;　　　　　　　　　　　　　　　　 /*　フォントの太さ　*/
　　　height: 25px;　　　　　　　　　　　　　　　　　　　　　 /*　スタイルシートの高さ　*/
　　　padding-top: 4px;　　　　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の上間隔　*/
　　　padding-bottom: 4px;　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の下間隔　*/
　　　padding-left: 8px;　　　　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の左間隔　*/
　　　padding-right: 8px;　　　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の右間隔　*/
　　　text-decoration: none;　　　　　　　　　　　　　　　 /*　文字の装飾　*/
　　　visibility: visible; 　　　　　　　　　　　　　　　　　　 /*　表示　*/
　　　width: 80%　　　　　　　　　　　　　　　　　　　　　　　 /*　ブロック幅　*/
}
</STYLE>
<SCRIPT type="text/javascript">

var xmldoc;

</SCRIPT>
</HEAD>
<BODY>
<DIV id="results" class="text"></DIV>
</BODY>
</HTML>

DOMツリーにアクセスすることで、メモリにXML文書を読み込み、ツリーのノードを操作しながら目的のノードや、ノードの属性を検索したりすることができます。

■　DOMツリーへのアクセスで使うHTMLの雛型

DOMにアクセスした結果を表示させるため、HTMLファイルには、STYLEタグを使ってスタイルシートの定義を行っておきます。ここでは、DOMにアクセスした結果を表示するスタイルシートにtextクラスを定義しておきます。textクラスは下の通りです。

.text
{
　　　background: #0000ff;　　　　　　　　　　　　　　 /*　背景色　*/
　　　border-bottom: white 1px solid;　　　　　　　　 /*　下枠の幅　*/
　　　cursor: hand;　　　　　　　　　　　　　　　　　　　　　 /*　カーソルのタイプ　*/
　　　color: white;　　　　　　　　　　　　　　　　　　　　　　 /*　文字色　*/
　　　font-family: 'sans-serif';　　　　　　　　　　　　　　 /*　フォントファミリ　*/
　　　font-size: 12pt;　　　　　　　　　　　　　　　　　　　　 /*　フォントサイズ　*/
　　　font-weight: normal;　　　　　　　　　　　　　　　　 /*　フォントの太さ　*/
　　　height: 25px;　　　　　　　　　　　　　　　　　　　　　 /*　スタイルシートの高さ　*/
　　　padding-top: 4px;　　　　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の上間隔　*/
　　　padding-bottom: 4px;　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の下間隔　*/
　　　padding-left: 8px;　　　　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の左間隔　*/
　　　padding-right: 8px;　　　　　　　　　　　　　　　　　 /*　枠（ブロック）と内容の右間隔　*/
　　　text-decoration: none;　　　　　　　　　　　　　　　 /*　文字の装飾　*/
　　　visibility: visible; 　　　　　　　　　　　　　　　　　　 /*　表示　*/
　　　width: 80%　　　　　　　　　　　　　　　　　　　　　　　 /*　ブロック幅　*/
}

上のリスト2-2には、このtextクラスを定義したHTMLファイルのソースコードを示しています。これ以降は、このHTMLファイルにさまざまなノード操作を指定するスクリプトを記述していきます。
このHTMLファイルをIEで表示すると、図2-4のようになります。

図2-4　DOM1.htmlの実行結果

次はSCRIPTタグ内部に「DOMにアクセスするJavaScript」を記述してみましょう。

■　onLoadイベントにaccesDOMメソッドを設定する

ページがロードされた直後にaccessDOMメソッドを呼び出せるように、次のようにしてBODYタグに onload="accessDOM()" を記述します。

<BODY onload="accessDOM()">

■　SCRIPTタグにaccessDOMメソッドを実装する

実際に、JavaScriptでaccessDOMメソッドを記述してみます。

■　xmldoc変数を宣言してドキュメントオブジェクトを生成する

JavaScriptでDOMを利用するには、最初にxmldoc変数を宣言wします。変数の宣言後に、new ActiveXObject("Microsoft.XNMLDOMN")を実行してドキュメントオブジェクトを生成します。そして次のようにしてxmldoc変数を通じてドキュメントオブジェクト利用できるように、ドキュメントオブジェクトのインスタンスをxmldoc変数に代入します。

xmldoc = new ActiverXObject(" Microsoft.XMLDOM") ;

これにより、xmldoc変数を使用して、XMLドキュメントオブジェクトにアクセスすることができるようになります。

次に、XML文書をメモリの読み込む準備をします。そのためには、メモリへのXML文書の読み込みが完了した後に、JavaScriptでドキュメントオブジェクトの処理を行うようにします。

xmldoc.async = false; ・・・・・・・async（非同期）プロパティにfalseを設定する

このようなファイルの読み込みを同期をとったファイルの読み込みといい、この指定には次の構文を使います。

プロパティを設定する構文

オブジェクト.プロパティ=式

※　非同期を指定する（xmldoc.async = true;）と、巨大なXML文書ファイルを読み込んでいる間にも他の処理gあできます。しかし、読み込みが完了したイベントを取得して、その他の処理をおk所名うようなスクリプトの記述が必要となり、プログラムが複雑になります。ここでのサンプルはすべて同期処理を使用ります。

この設定によって、メモリにXML文書を読み込むことができるようになります。実際にXML文書をメモリに読み込むには、Loadメソッドに読み込むXML文書を指定し、次のようにしてLoadメソッドを呼び出します。

xmldoc.load("kensaDOM1.xml");

メソッドを呼び出す構文

オブジェクト.メソッド(パラメタ)　　←パラメタはメソッドに値を渡すための式

例

・kensaDOM1.xmlファイルをメモリに読み込む

xmldoc.load("kensaDOM1.xml")

・XML文書をkensaDOM1.xmlファイルに書き込む

xmldoc.save("kensaDOM1.xml")

■　string変数を宣言して初期化する

ここからは、ルートのノード名をDOMにアクセスして取得します。そのため、取得したノード名を補完するためにstring変数を宣言し、変数を初期化しておきます。

var string = "";

■　ルートのノード名を取得する

ルートのノード名を取得するには、プロパティを参照するようにします。プロパティを参照するには次のような構文を使用します。

プロパティを参照する構文

オブジェクト.プロパティ

この構文に対応するようにオブジェクトとプロパティを指定してみます。
まず、ドキュメントオブジェクト変数を記述し、そのあとにドキュメントの「ルートの要素を指定するdocumentElementプロパティ」と「ノード名を取得するためのnodeNameプロパティ」を指定します。これらをまとめると、xmldoc.documentElement.nodeNameとなります。
これを実行すると、ルートノード名を取得できますので、その結果をstring変数に格納します。文字列の最後には改行を示すBRタグを付加しておきます。

string = "ルートノード名:" + xmldoc.documentElement.nodeName + "<BR>" ;

■　results属性を持ったDIVタグの領域にノード名を表示する

DIVタグで設定した領域にノード名を表示するには、result属性値を持ったDIVタグの領域のinnnerHTML(results.innerHTML)にstring変数の内容を代入します。これをまとめると次のようになります。

results.innnerHTML = string;

これまで説明してきた内容を、リスト2-3にまとめます。

リスト2-3　DOM1-1.html　--- kensaDOM1.xmlファイルを読み込むスクリプト

・・・・・・・・・・・・・・
<SCRIPT type="text/javascript">
var xmldoc;
function accessDOM()
{
　　　// XMLDOMオブジェクトを生成する
　　　xmldoc = new ActiveXObject("Microsoft.XMLDOM");
　　　// XML文書を同期で読み込む設定をおこなう
　　　xmldoc.async = false;
　　　// "kensaDOM1.xml"ファイルをメモリに読み込む
　　　xmldoc.load("kensaDOM1.xml");

　　　// string文字列を宣言し、初期化する
　　　var string="";
　　　// ルートノード名を取得してstring文字列に代入する
　　　string = "ルートノード名:" + xmldoc.documentElement.nodeName+"<BR>" ;

　　　// DIVタグで設定した領域にノード名を表示する
　　　results.innerHTML = string;
}
</SCRIPT>
・・・・・・・・・・・・・・・・

このJavaScriptのプログラムを「DOM1.html」ファイルのSCRIPTタグの部分に入力して、DOM1-1.htmlとして保存します。そして、DOM1-1.htmlファイルダブルクリックすると、IEがkensaDOM1.xmlファイルを読み込んでルートのノード名を表示します。

図2-5　DOM1.htmlの実行結果

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box