DOMツリーにアクセスする
まず、数のようなDOMツリーの構造を持つXML文書、「kensaDOM.xml」を例にとって、ノード情報の取得を説明します。
図2-3 DOMツリーとノードの関係
この図では、comment、title、name、date、home、mail、optionがDOMツリーのノードになります。この中で、ルートにあるcommentはルートノードになります。
図2-3をXMLインスタンスと記述するとリスト2-1のようになります。
リスト2-1 kensaDOM.xml
次に、DOMツリーにアクセスするHTMLファイルの基となるひな形を記述してみましょう。
リスト2-2 DOM1.html --- DOMツリーへのアクセスで使うHTMLファイルの雛型
DOMツリーにアクセスすることで、メモリにXML文書を読み込み、ツリーのノードを操作しながら目的のノードや、ノードの属性を検索したりすることができます。
DOMにアクセスした結果を表示させるため、HTMLファイルには、STYLEタグを使ってスタイルシートの定義を行っておきます。ここでは、DOMにアクセスした結果を表示するスタイルシートにtextクラスを定義しておきます。textクラスは下の通りです。
上のリスト2-2には、このtextクラスを定義したHTMLファイルのソースコードを示しています。これ以降は、このHTMLファイルにさまざまなノード操作を指定するスクリプトを記述していきます。
このHTMLファイルをIEで表示すると、図2-4のようになります。図2-4 DOM1.htmlの実行結果
次はSCRIPTタグ内部に「DOMにアクセスするJavaScript」を記述してみましょう。
ページがロードされた直後にaccessDOMメソッドを呼び出せるように、次のようにしてBODYタグに onload="accessDOM()" を記述します。
実際に、JavaScriptでaccessDOMメソッドを記述してみます。
JavaScriptでDOMを利用するには、最初にxmldoc変数を宣言wします。変数の宣言後に、new ActiveXObject("Microsoft.XNMLDOMN")を実行してドキュメントオブジェクトを生成します。そして次のようにしてxmldoc変数を通じてドキュメントオブジェクト利用できるように、ドキュメントオブジェクトのインスタンスをxmldoc変数に代入します。
これにより、xmldoc変数を使用して、XMLドキュメントオブジェクトにアクセスすることができるようになります。
次に、XML文書をメモリの読み込む準備をします。そのためには、メモリへのXML文書の読み込みが完了した後に、JavaScriptでドキュメントオブジェクトの処理を行うようにします。
このようなファイルの読み込みを同期をとったファイルの読み込みといい、この指定には次の構文を使います。
プロパティを設定する構文
※ 非同期を指定する(xmldoc.async = true;)と、巨大なXML文書ファイルを読み込んでいる間にも他の処理gあできます。しかし、読み込みが完了したイベントを取得して、その他の処理をおk所名うようなスクリプトの記述が必要となり、プログラムが複雑になります。ここでのサンプルはすべて同期処理を使用ります。
この設定によって、メモリにXML文書を読み込むことができるようになります。実際にXML文書をメモリに読み込むには、Loadメソッドに読み込むXML文書を指定し、次のようにしてLoadメソッドを呼び出します。
メソッドを呼び出す構文
例
・kensaDOM1.xmlファイルをメモリに読み込む
・XML文書をkensaDOM1.xmlファイルに書き込む
ここからは、ルートのノード名をDOMにアクセスして取得します。そのため、取得したノード名を補完するためにstring変数を宣言し、変数を初期化しておきます。
ルートのノード名を取得するには、プロパティを参照するようにします。プロパティを参照するには次のような構文を使用します。
プロパティを参照する構文
この構文に対応するようにオブジェクトとプロパティを指定してみます。
まず、ドキュメントオブジェクト変数を記述し、そのあとにドキュメントの「ルートの要素を指定するdocumentElementプロパティ」と「ノード名を取得するためのnodeNameプロパティ」を指定します。これらをまとめると、xmldoc.documentElement.nodeNameとなります。
これを実行すると、ルートノード名を取得できますので、その結果をstring変数に格納します。文字列の最後には改行を示すBRタグを付加しておきます。DIVタグで設定した領域にノード名を表示するには、result属性値を持ったDIVタグの領域のinnnerHTML(results.innerHTML)にstring変数の内容を代入します。これをまとめると次のようになります。
これまで説明してきた内容を、リスト2-3にまとめます。
リスト2-3 DOM1-1.html --- kensaDOM1.xmlファイルを読み込むスクリプト
このJavaScriptのプログラムを「DOM1.html」ファイルのSCRIPTタグの部分に入力して、DOM1-1.htmlとして保存します。そして、DOM1-1.htmlファイルダブルクリックすると、IEがkensaDOM1.xmlファイルを読み込んでルートのノード名を表示します。
図2-5 DOM1.htmlの実行結果