DOMとJavaScript: formのbuttonで表示を切り替える

2001年9月16日(日)更新

■属性名を指定して属性を見るインターフェイス

たけち: ずいぶん前に、XMLページをIEで表示させよう(初級編)で、formのbuttonでXSLを切り替えて表示内容を変える例をやったよね。

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

たけち: 今回は、それと同じようなことをXSLではなくって、これまで勉強したDOMを使ってやってみよう。

さらら: あっ、そういうことってできそうね。

たけち: 今回は特に新しいDOMのインターフェイスは使わないから、割と分かりやすいと思うよ。どちらかというとJavaScriptの使い方ってとこかな?

さらら: うん。でも教えて!!

たけち: じゃあ、どんなことをするのかを図で示しておくね。

buttonで表示を切り替える

さらら: すべての歌、額田王の歌、持統天皇の歌のそれぞれで対応するJavaScriptのfunctionが違うのね。そうでしょ。

たけち: そうそう。わかってるね。

さらら: えへへ。。。前にやったXMLページをIEで表示させよう(初級編)を、ちょっと見直したの。。。

たけち: そっか。じゃあ、それぞれのbuttonに対応してどんな風に処理をするのか、もう少し詳しく見てみるね。次の図を見て!!

buttonで表示を切り替える処理の流れ

さらら: 作者を調べるかどうかが違うのね。あれ? makeTable()って??

たけち: あっ、そのfunctionで表示用のテーブルを作るんだよ。そうだね。。。。じゃあ、どんな風に作るのかは、次の図に載せておくね。

makeTable()で作成するテーブルの内容

■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">

var string;

function readxml() // manyo.xmlファイルを読み込みます
{
    // XMLドキュメントをDOMで扱うためのオブジェクトを作る
  xml_doc = new ActiveXObject("Microsoft.XMLDOM");

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

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

function makeTable(poem_node) // 一つの歌をtable形式にします
{

    // tableタグを入れる
  string += "<table border='1' width='500' align='center'>";

    // ヘッダー行
  string += "<tr>";

    //　作者 : poet属性の内容
  string += "<th>";
  string += "作者 : " ;
  attribute = poem_node.getAttributeNode("poet") ;
  poet = attribute.value ;
  string += poet ;
  string += "</th>";

    //　歌番号 : no属性の内容
  string += "<th>";
  string += "歌番号 : " ;
  attribute = poem_node.getAttributeNode("no") ;
  pno = attribute.value ;
  string += pno ;
  string += "</th>";

  string += "</tr>";

    //　歌の内容
  string += "<tr>";
  string += "<td>" + poem_node.text + "</td>" ;

    //　イメージファイル名を生成(歌番号で使った pnoを利用)
  string += "<td>" ;
  string += "<img src='image/m" + pno + ".jpg'/>" ;
  string += "</td>" ;

  string += "</tr>";
  string += "</table>" ;
}

function manyoAll() //　すべての歌を表示
{
    string = "" ;
    // 最初の子ノードを取得します
  var poem_node = xml_doc.documentElement.firstChild;

    // 各ノードの歌(text)を取得して表示情報を作ります
  while (poem_node) {

  makeTable(poem_node) ;
    // 次の子ノードを取得します
  poem_node = poem_node.nextSibling;
  }

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

function manyoNukata() // 額田王の歌を表示
{
    string = "" ;
    // 最初の子ノードを取得します
  var poem_node = xml_doc.documentElement.firstChild;

    // 各ノードの歌(text)を取得して表示情報を作ります
  while (poem_node) {

    attribute = poem_node.getAttributeNode("poet") ;
    poet = attribute.value ;

    if (poet == "額田王") {
      makeTable(poem_node) ;
    }

      // 次の子ノードを取得します
    poem_node = poem_node.nextSibling;
  }

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

function manyoJito() // 持統天皇の歌を表示
{
    string = "" ;
    // 最初の子ノードを取得します
    var poem_node = xml_doc.documentElement.firstChild;

    // 子ノードがあれば各ノードの歌(text)を取得してstring文字列に追加代入します
  while (poem_node) {

    attribute = poem_node.getAttributeNode("poet") ;
    poet = attribute.value ;

    if (poet == "持統天皇") {
      makeTable(poem_node) ;
    }

      // 次の子ノードを取得します
    poem_node = poem_node.nextSibling;
  }

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

</script>
</head>

<body onload="readxml()">
<h3 align="center">たのしいXML: DOMサンプル(FORMのbuttonで処理を変える)</h3>

<p align="center">
  <form>
  <input type="button" value="すべての歌" onClick="manyoAll()">
  <input type="button" value="額田王の歌" onClick="manyoNukata()">
  <input type="button" value="持統天皇の歌" onClick="manyoJito()">
  </form>
</p>

<p align="center">この下に歌の内容とイメージが表示されます。</p>

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

</body>
</html>

さらら: 作者(poet)や歌番号(no)の属性の取り方は、前回のといっしょなのね。

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

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

さらら: ねぇ、これってボタンじゃなくって、メニューでもできるのよね。

たけち: そうそう。できたらメニューを使ったサンプルなんかもやってみたいね。じゃあ、今回はここまで。おつかれさま。

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

→次もお楽しみに。 (^ ^;