DOMとJavaScript: 子ノードを調べる、他

2001年8月12日(日)更新

■ルートノードがmanyosyuのXMLドキュメント

たけち: 前回は、歌(poemノード)がひとつだけの、簡単なXMLドキュメントを読んで見たよね。使ったDOMはdocumentElementとnodeNameだけだったね。

さらら: えぇ、まだまだ慣れないところはあるけれど雰囲気は分かったわ。

たけち: 今回は、子ノードを調べるインターフェイスを中心にお話しようね。

さらら: は〜い。たのしみだわ。。。

たけち: その前に、今回使うXMLドキュメントを載せておこうね。前回よりちょっとだけ構造が変わっているよ。最初にリストを見てみよう。

XMLドキュメントサンプル poems.xml

<?xml version="1.0" encoding="Shift_JIS"?>

<manyosyu volume="1">

  <poem>
    熟田津(にきたつ)に船乗りせむと月待てば、潮もかなひぬ、今は漕ぎ出でな
  </poem>

  <poem>
    茜(あかね)さす、紫野行き標野(しめの)行き、野守(のもり)は見ずや、君が袖振る
  </poem>

  <poem>
    春過ぎて 夏来たるらし 白妙(しろたえ)の 衣干したり 天の香具山
  </poem>

</manyosyu>

さらら: 前回より歌が３首に増えているわね。それと、ルートノードがmanyosyuになっているわ。

たけち: 簡単だね。じゃあ、このサンプルXMLドキュメントがDOMではどうツリー構造として表現されるかを次の図に描いておくね。

XMLドキュメントサンプルのDOMイメージ

さらら: あっ、分かる分かる!!

たけち: よかった・・・。じゃあ、このサンプルXMLドキュメントを今回はどう扱うのかをお話しようね。

■子ノードを調べて、テキストをひろう

さらら: あら、ノードのテキストをひろう(取ってくる)のは前回もやったわね。どう違うのかしら・・・・・

たけち: 前回はルートノード(DOCUMENTノード)の名前をひろったね。XMLテキストにはルートノードが必ずひとつだけあるから何にも考えずに名前をとってきたんだ。

さらら: あっ、そっか.....(^ ^; 名前だったわね...

たけち: 今回は、子ノードのテキストを取ってくるから、次のことするんだよ。それぞれ該当のDOMインターフェイス名を載せておくね。

  1. 子ノードがあるかどうかを調べる: hasChildNode
  2. 子ノードがいくつあるかを調べる: childNodes.length
  3. 子ノードのテキストを取ってくる: childNodes.item(int index).text

さらら: それぞれDOMのインターフェイスって、どんなものなのかしら。

たけち: もちろん、つぎにそれぞれについて図で説明してゆくね。

さらら: うん。

■子ノードがあるかどうかを調べる: hasChildNode

たけち: hasChildNodeは、名前から想像できるように、今見ているノードに子供のノードがあるかどうかを調べるものなんだ。

DOM: hasChildNode

さらら: あっ、子ノードがあれば" true "になるのね。

たけち: そうそう。いいよね。

■子ノードの数を調べる: length

たけち: つぎは、ノードの数を調べるlengthだ。ここでは、子ノードの数を調べるから、子ノードを示すchildNodesとドット(.)でつないだchildNodes.lengthを使うよ。

さらら: あっ、そういう風に組み合わせて使うのね。

DOM: childNodes.length

■子ノードのテキストをひろう: childNodes.item(int index).text

たけち: 最後は、ノードのテキストを調べるchildNodes.item(int index).textだ。

さらら: あら、難しそうね。。。。。。

たけち: あっ、心配ないよ。これも、実はつぎのものをドット(.)でつないでいるんだよ。

childNodes
子ノードを示します
item(int index)
index番目のノードを示します。indexは、0から始まります。ですから、item(0)は最初のノードです。
text
見ているノードの下のテキストをとってきます。最初と最後の空白(スペース)が削除されたテキストがひろわれます。

さらら: あっ、なるほど。。。。。。

たけち: これも、図で簡単に説明しておくね。

DOM: childNodes.item(int index).text

■JavaScriptサンプルリストと表示結果

さらら: だいたい分かったわ。じゃあ、ねっ! (^ ^*

たけち: そうだね。じゃあ、今回のJavaScriptを含んだHTMLファイルの内容を次に載せようね。

さらら: わ〜い!! (^ ^*

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="manyo.css" />

<title>たのしいXML: DOM sample ルートエレメントの名前を表示</title>

<script language="JavaScript">

function display()
{
    // XMLドキュメントをDOMで扱うためのオブジェクトを作る
  xml_doc = new ActiveXObject("Microsoft.XMLDOM");

    // XMLドキュメントの読み込み設定をする(非同期にしない)
  xml_doc.async = false;

    // XMLドキュメント"poems.xml"を読み込む
  xml_doc.load("poems.xml");

    // stringという名前の文字列を空にする
  var string = "

";

    // 子ノードがあれば内容を取得してstring文字列に追加代入します

  if (xml_doc.documentElement.hasChildNodes()) {
    var i = 0;

      // 子ノードの数を調べます
    var j = xml_doc.documentElement.childNodes.length ;
    string += "■子ノードの数は、" + j + " です。<br/>" ;

      // 子ノードのテキストをとってstring文字列に追加代入します
    while (i < j) {
    string += xml_doc.documentElement.childNodes.item(i).text + "<br/>";
    i++;
    }

  } else string +="歌はありません。"

    string += "</p>" ;

    // idがpoemのdiv領域にstring文字列を表示する
  poem.innerHTML = string;
}
</script>
</head>

<body onload="display()">
<h3 align="center">たのしいXML: DOMサンプル</h3>
<h3 align="center">- hasChildNodes, childNodes.length, childNodes.item(i).text -</h3>

<div id="poem"></div>

</body>
</html>

さらら: while( i < j )のところで、item(i)はitem(0), item(1), item(2)と変化してゆくのね。

たけち: そうそう。じゃあ、このHTMLテキストをいつものようにファイルにしておくからクリックしてみて。

JavaScriptサンプル　dom-2(haschild).htmlの表示結果

たけち: どう? さらら。前回よりはマシかな?

さらら: そうね。まだまだ慣れない感じだけど、なんとかついてゆけそう・・・

たけち: その調子。。。じゃあ、今回はここまで。おつかれさま。

さらら: うん。ありがと。 (^ ^*

→次は属性をみるです。 (^ ^;

補足です・・・・・　(^ ^;

今回、テキストを取ってくるのに使った、text以外の方法には次のような方法がありますが、ちょっと長くなるので今回はtextを使用させていただきました。

  • childNodes.item(i).childNodes.item(0).nodeValue