ノードの情報を取得する

■　ルートのノード型の情報を取得する

ルートのノード型を取得するには、nodeTypesStringプロパティあるいはnodeTypeプロパティを使用します。この２つのプロパティは、取得したノード型の表し方が異なります。nodeTypeStringプロパティは「ノードの文字列」で、nodeTypeプロパティは「ノード型に対応した数値」でノード型を表します。

nodeTypeプロパティで取得される数値に対応するノード型

数値	ノード型
1	ELEMENT
2	ATTRIBUTE
3	TEXT
4	CDATA_SECTION
5	ENTITY_REFFERENCE
6	ENTITY
7	PROCESSING_INSTRUCTION
8	COMMENT
9	DOCUMENT
10	DOCUMENT_TYPE
11	DOCUMENT_FRAGMENT
12	NOTATION

■　ノード型情報を取得するプロパティ

・ノードの型を文字列で表す（nodeTypeStringプロパティ）
・ノードの型を数値で表す（nodeTypeプロパティ）

実際にnodeTypeStringプロパティとnodeTypeプロパティを使用してルートのノード型の情報を取得するスクリプトを記述したものが、リスト2-4です。

リスト2-4　DOM1-2.html　---ノード型の情報を取得するスクリプトの追加

・・・・・・
<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>" ;
　　　// ルートノード型文字列を取得してstring文字列に追加する
　　　string += "ルートノードの型文字列:" + xmldoc.documentElement.nodeTypeString+"<BR>" ;
　　　// ルートノードの型(数値)を取得してstring文字列に代入する
　　　string += "ルートノードを型で表す数値:" + xmldoc.documentElement.nodeType+"<BR>" ;
　　　// DIVタグで設定した領域にノード名を表示する
　　　results.innerHTML = string;
}
</SCRIPT>
・・・・・・

このJavaScriptの追加プログラムを「DOM1-1.html」ファイルのSCRIPTタグの部分に入力して「DOM1-2.html」として保存します。そして、「DOM1-2.html」ファイルを読み込んでルートのノード型の文字列やノード型を示す数値（上表）を表示することができます。

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

■　ルートノードの子ノードの存在について調べる

commentノードに子ノードが存在するかどうかをDOMによって取得することができまうs。このときにはhasChildNodesメソッドを呼び出します。hasChildNodesメソッドを呼び出すと、ノードに子ノードが存在する場合にはtrueを、存在しないときにはfalseを返します。

■　子ノードが存在するかどうかを調べる

hasChildNodes()　　←子ノードが存在するかどうかを取得する
　　　 ・trueが帰ると子ノードは存在する
・falseが帰ると子ノードは存在しない

子ノードの数を取得するには、どうすればよいのでしょうか。
これには、「子ノードを含むノードの一覧（ノードリスト）」を示すchildnodesプロパティに続き、lengthプロパティを使用します。lengthプロパティは、「ノードリスト内部の項目数」を示しています。

■　子ノードを取得する

xmldoc.documentElement.childNodes.length

図2-7　子ノードの存在とノード数を調べる

リスト2-5に、「ルートノードに子ノードが存在するかどうかを調べるソースコード」と「子ノードの数を主とkするソースコード」を示します。

リスト2-5　DOM1-3.html　---ルートノードの子ノードの存在生むと数を取得するスクリプトの追加

・・・・・・・・
<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>" ;
　　　// ルートノード型文字列を取得してstring文字列に追加する
　　　string += "ルートノードの型文字列:" + xmldoc.documentElement.nodeTypeString+"<BR>" ;
　　　// ルートノードの型(数値)を取得してstring文字列に追加する
　　　string += "ルートノードを型で表す数値:" + xmldoc.documentElement.nodeType+"<BR>" ;

　　　// ルートノードに子ノードが存在するかどうかを調べてstring文字列に追加する
　　　string += "子ノードが存在するか:" + xmldoc.documentElement.hasChildNodes()+"<BR>" ;
　　　// 子ノードの数を取得してstring文字列に追加する
　　　string += "子ノード数:" + xmldoc.documentElement.childNodes.length +"<BR>" ;
　　　// DIVタグで設定した領域にノード名を表示する
　　　results.innerHTML = string;
}
</SCRIPT>
・・・・・・・・

このJavaScriptのついかプログラムを「DOM1-2.html」ファイルのSCRIPTタグの部分に入力して、「DOM1-3.html」として保存します。そして、「DOM1-3.html」ファイルを開くと、IEが「kensaDOM1.xml」ファイルを読み込んで子ノードの有無や子ノード数を表示することができます。図2-8にその実行結果を示します。

図2-8　DOM1-3.htmlの実行結果

■　子ノードの情報を取得する

上のパートで実装したdocumentElement.childNodes.lengthによって、子ノードの数を表示することができました。ここでは、子ノードのテキスト（要素の内容）を表示してみます。

■　子ノードのノードテキストを取得する

個々のノードにアクセスするには、documentElement.childNodeの後にitemメソッドを追加します。temメソッドを呼び出すときには図2-9のようにitem()の中にノードのインデックスを設定します。最後に、「テキストを取得することを示すtextプロパティもしくはnodevalueプロパティを指定」します。

■　子ノードのノードテキストを取得する

図2-9　nodeValueプロパティを使ったノードテキストの取得

 
itemメソッドとtextプロパティあるいはodeValueプロパティを指定してノードテキストを取得します。

たとえば、図2-9のような構造を持つDOMリーでノードテキストの取得素をしてみます。最初のノードであるtitleのテキスト、「患者A　X線」を取得するには、document.Element.childNodes.item(0).textと指定します。また、documentElement.childNodes.item(5).textとすると、最後のノードのテキストである「右下肺野に直径２．５ｃｍの薄い輪状陰影があり、その中の肺門側の下部に凸凹のある腫瘤状陰影がある」を取得することができます。
textプロパティの代わりにdeValueプロパティでも同様の結果を得ることができます。Valueプロパティを用いた場合の、6つの子ノード（ノード1〜6）のノードテキスト取得の指定を次に示します。右端に示してあるのは、この指定によって取得できるノードテキストです。

・ノード1：document.Element.childNodes.item(0).nodeVlue・・・・患者A　X線
・ノード2：document.Element.childNodes.item(1).nodeVlue・・・・検査技師　N
・ノード3：document.Element.childNodes.item(2).nodeVlue・・・・2007/08/01
・ノード4：document.Element.childNodes.item(3).nodeVlue・・・・Seikei-0801
・ノード5：document.Element.childNodes.item(4).nodeVlue・・・・n-ken@hosp.gr
・ノード6：document.Element.childNodes.item(5).nodeVlue・・・・右下肺野に直径２．５ｃｍの薄い輪状陰影があり、その中の肺門側の下部に凸凹のある腫瘤状陰影がある

■　子ノードのノード名を取得する

textパティの代わりにnodeNameプロパティを指定すると、ノード名を取得することができます。
図2-9のDOMツリーを例にとり、６つの子ノード（ノード1〜6）の各ノード名を取得してみます。指定方法と取得できるノード名（右端）は、次のようになります。

・ノード1：document.Element.childNodes.item(0).nodeName・・・・title
・ノード2：document.Element.childNodes.item(1).nodeName・・・・name
・ノード3：document.Element.childNodes.item(2).nodeName・・・・date
・ノード4：document.Element.childNodes.item(3).nodeName・・・・home
・ノード5：document.Element.childNodes.item(4).nodeName・・・・mail
・ノード6：document.Element.childNodes.item(5).nodeName・・・・option

■　子ノードのノード名を取得する

documentElement.childNodes.item(n).nodeName　　←　n番目のノード名を取得する

では、itemメソッド、およびtextとNameプロパティを組み合わせて、6つの子ノードのテキストとノード名を表示するスクリプトを「DOM1-3.html」ファイルのSCRIPTタグの部分に追加してみます。そして、DOM1-4.htmlとして保存します。

リスト2-6　DOM1-4.html　---　ノードテキストとノード名を表示するスクリプトの追加

</STYLE>
<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>" ;
　　　// ルートノード型文字列を取得してstring文字列に追加する
　　　string += "ルートノードの型文字列:" + xmldoc.documentElement.nodeTypeString+"<BR>" ;
　　　// ルートノードの型(数値)を取得してstring文字列に追加する
　　　string += "ルートノードを型で表す数値:" + xmldoc.documentElement.nodeType+"<BR>" ;

　　　// ルートノードに子ノードが存在するかどうかを調べてstring文字列に追加する
　　　string += "子ノードが存在するか:" + xmldoc.documentElement.hasChildNodes+"<BR>" ;
　　　// 子ノードの数を取得してstring文字列に追加する
　　　string += "子ノード数:" + xmldoc.documentElement.childNodes.length +"<BR>" ;
　　　string += "子ノード1:" + xmldoc.documentElement.childNodes.item(0).text +"("+
　　　xmldoc.documentElement.childNodes.item(0).nodeName +")<BR>" ;
　　　string += "子ノード2:" + xmldoc.documentElement.childNodes.item(1).text +"("+
　　　xmldoc.documentElement.childNodes.item(1).nodeName +")<BR>" ;
　　　string += "子ノード3:" + xmldoc.documentElement.childNodes.item(2).text +"("+
　　　xmldoc.documentElement.childNodes.item(2).nodeName +")<BR>" ;
　　　string += "子ノード4:" + xmldoc.documentElement.childNodes.item(3).text +"("+
　　　xmldoc.documentElement.childNodes.item(3).nodeName +")<BR>" ;
　　　string += "子ノード5:" + xmldoc.documentElement.childNodes.item(4).text +"("+
　　　xmldoc.documentElement.childNodes.item(4).nodeName +")<BR>" ;
　　　string += "子ノード6:" + xmldoc.documentElement.childNodes.item(5).text +"("+
　　　xmldoc.documentElement.childNodes.item(5).nodeName +")<BR>" ;
　　　// DIVタグで設定した領域にノード名を表示する
　　　results.innerHTML = string;
}
</SCRIPT>
</HEAD>

DOM4-1.htmlファイルをダブルクリックすると、IEがkensaDOM1.xmlファイルを読み込んで子ノードの要素の内容と要素名を表示することができます。

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

これまでの説明でJavaScriptを使って、ルートノードとその子ノードの様々な情報を取得し、表示することができるようになりました。まとめとして「DOM1-4.html」の全ソースリストを示します。

リスト2-7　「DOM1-4.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;
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>" ;
　　　// ルートノード型文字列を取得してstring文字列に追加する
　　　string += "ルートノードの型文字列:" + xmldoc.documentElement.nodeTypeString+"<BR>" ;
　　　// ルートノードの型(数値)を取得してstring文字列に追加する
　　　string += "ルートノードを型で表す数値:" + xmldoc.documentElement.nodeType+"<BR>" ;

　　　// ルートノードに子ノードが存在するかどうかを調べてstring文字列に追加する
　　　string += "子ノードが存在するか:" + xmldoc.documentElement.hasChildNodes+"<BR>" ;
　　　// 子ノードの数を取得してstring文字列に追加する
　　　string += "子ノード数:" + xmldoc.documentElement.childNodes.length +"<BR>" ;
　　　string += "子ノード1:" + xmldoc.documentElement.childNodes.item(0).text +"("+
　　　xmldoc.documentElement.childNodes.item(0).nodeName +")<BR>" ;
　　　string += "子ノード2:" + xmldoc.documentElement.childNodes.item(1).text +"("+
　　　xmldoc.documentElement.childNodes.item(1).nodeName +")<BR>" ;
　　　string += "子ノード3:" + xmldoc.documentElement.childNodes.item(2).text +"("+
　　　xmldoc.documentElement.childNodes.item(2).nodeName +")<BR>" ;
　　　string += "子ノード4:" + xmldoc.documentElement.childNodes.item(3).text +"("+
　　　xmldoc.documentElement.childNodes.item(3).nodeName +")<BR>" ;
　　　string += "子ノード5:" + xmldoc.documentElement.childNodes.item(4).text +"("+
　　　xmldoc.documentElement.childNodes.item(4).nodeName +")<BR>" ;
　　　string += "子ノード6:" + xmldoc.documentElement.childNodes.item(5).text +"("+
　　　xmldoc.documentElement.childNodes.item(5).nodeName +")<BR>" ;
　　　// DIVタグで設定した領域にノード名を表示する
　　　results.innerHTML = string;
}
</SCRIPT>
</HEAD>
<BODY onLoad="accessDOM()">
<DIV id="results" class="text"></DIV>
</BODY>
</HTML>

<<<戻る