DOMとJavaScript: 次のノードを見る(nextSibling)他

2001年8月26日(日)更新

■子ノードを調べたり見たりするインターフェイス

たけち: 前に、DOMとJavaScript: 子ノードを調べる、他で、子ノードがいくつあるかを調べて子ノードのテキストを取ってくる例を次のようなインターフェイスを使って、やったよね。
  1. 子ノードがあるかどうかを調べる: hasChildNode
  2. 子ノードがいくつあるかを調べる: childNodes.length
  3. 子ノードのテキストを取ってくる: childNodes.item(int index).text

さらら: あぁ、そうだったわね。

たけち: 今回は、子ノードを調べたり、みたりする別のインターフェイスを紹介するね。。

さらら: あっ、他の方法もあるってことなのね。

たけち: そう、雰囲気は分かってきていると思うから、早速次に紹介するね。

  1. 子ノードの最初のノードを取得する: firstChild
  2. 次の子ノードを取得する: nextSibling

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

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

さらら: うん。

■子ノードの最初のノードを取得する: firstChild

たけち: firstChildは、名前から想像できるように、今見ているノードの子供のノードの最初の子ノードを取得するものなんだ。

DOM: firstChild

■次のノードを取得する: nextSibling

たけち: nextSiblingは、今見ているノードの次のノードを取得するものなんだ。

DOM: nextSibling

■サンプルプログラム: 子ノードを調べて、テキストをひろう

さらら: 今回はこれをどういう風に使うのかしら。

たけち: そうだね。流れの主なところだけを次に載せておくね。あっ、そうそう。使うXMLドキュメントは前回と同じだからね。
  1. manyosyuの子ノード(poem)の最初のノードをfirstChildを使って取得する
  2. 子ノード(poem)がなくなるまで次の子ノードをnextSiblingで取得しながら、子ノード(poem)のテキストを取ってくる。

さらら: うんうん。でも、実際のJavaScriptの書き方はどうなの??

たけち: もちろん、それは次に載せておくね。実際のJavaSCriptからは少し省略があるから気をつけてね。

firstChild, nextSiblingの使い方

■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サンプル(次のノードをみる)</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-2.xml");

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

    // 最初の子ノードを取得します
  var poem_node = xml_doc.documentElement.firstChild;

    // 子ノードがあれば各ノードの歌(text)を取得してstring文字列に追加代入します
  while (poem_node) {
    string += poem_node.text + "<br/>" ;
      // 次の子ノードを取得します
    poem_node = poem_node.nextSibling;
  }

  string += "</p>" ;

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

<body onload="display()">
<h3 align="center">たのしいXML: DOMサンプル(次のノードをみる)</h3>
<h3 align="center">- nextSibling -</h3>

<p align="center">最初の子ノードを見るにはfirstChildを使っています。</p>

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

</body>
</html>

さらら: 前のサンプルと比べると、ずっとすっきりしている感じがするわ。

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

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

さらら: DOMのインターフェイスって、いろいろあるのね。

たけち: そうだね、まだまだあるからもう少し続けるね。じゃあ、今回はここまで。おつかれさま。

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

→次回は、属性名を指定して属性値を見る(getAttributeNode) です。。 (^ ^;