Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

ノードの情報を取得する

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

ルートのノード型を取得するには、nodeTypesStringプロパティあるいはnodeTypeプロパティを使用します。この2つのプロパティは、取得したノード型の表し方が異なります。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とすると、最後のノードのテキストである「右下肺野に直径2.5cmの薄い輪状陰影があり、その中の肺門側の下部に凸凹のある腫瘤状陰影がある」を取得することができます。
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・・・・右下肺野に直径2.5cmの薄い輪状陰影があり、その中の肺門側の下部に凸凹のある腫瘤状陰影がある

textパティの代わりにnodeNameプロパティを指定すると、ノード名を取得することができます。
図2-9のDOMツリーを例にとり、6つの子ノード(ノード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>

<<<戻る

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