DOMとJavaScript: 属性名を指定して属性を見る(getAttributeNode)

2001年9月9日(日)更新

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

たけち: 前に、DOMとJavaScript: 属性をみるで、ノードの属性をとって来る例を次のようなインターフェイスを使って、やったよね。
  1. 子ノードのテキストを取ってくる: attributes.item(int index).text

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

たけち: このインターフェイスでは、item(0)や今回はitem(1)というように、属性の順番で指定してたよね。でもこれだと、属性が増えたり順序がかわったりすると思ったような結果が得られないよね。そこで、属性の名前を指定してその値をとってくるインターフェイスを紹介するね。

さらら: なるほど、そう言われるとそういう方法が欲しいわね。

たけち: そうだね。じゃあ早速次に図で紹介するね。

DOM: getAttributeNode()

さらら: 分かるわ。欲しい属性の名前を指定してgetAttributeNode()を呼ぶとその名前をもつ属性ノードがとってこれるのね。。。。あれ、でも、属性の値を取るにはそれからどうしたらいいのかしら・・・

たけち: あっ、IEの場合だと、そのノードについてvalueかnodeValueでとってこれるんだ。

さらら: あっ、そうなの。

たけち: たとえば、次のようにすればいいってことだね。
  1. あるノード(node)の属性ノードをattributeにとってくる:
    attribute = node.getAttributeNode("属性名") ;
  2. 取得した属性ノード(attribute)の値をとってくる:
    attribute値 = attribute.value ;
    または attribute値 = attribute.nodeValue ;

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

さらら: だいたいサンプルの想像ができるわ。

たけち: そうだね。一応、確認のために流れの主なところだけを次に載せておくね。使うXMLドキュメントは前回と同じだからね。

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

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

getAttributeNode(), valueの使い方

■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-2.xml"を読み込む
   xml_doc.load("poems-2.xml");

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

      // ルートノードの属性(volume)を取得してstring文字列に追加代入します
   var attribute = xml_doc.documentElement.getAttributeNode("volume") ;
   var volno = attribute.value ;

   string += "■万葉集のvolume(属性)は、" + volno + " です。<br/>" ;

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

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

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

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

      string += "■歌番号="+ no + ", " ;
      string += " 作者=" + poet + "<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">- getAttributeNode() -</h3>

<table width="400" align="center">
<tr>
<td>

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

</td>
</tr>
</table>

</body>
</html>

さらら: これで、指定した属性がきちんと取れるように名乗るね。

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

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

さらら: これでまた少しDOMを勉強できてうれしいわぁ。

たけち: 少しずつでもたのしくやろうね。じゃあ、今回はここまで。おつかれさま。

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

→次回は、buttonで表示を切り替えるです。 (^ ^;