DOMとJavaScript: 属性をみる

2001年8月26日(日)更新


■それぞれのノードに属性をつけたXMLドキュメント

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

さらら: は〜い。

たけち: その前に、今回使うXMLドキュメントを載せておこうね。前回のXMLテキストに属性を追加しているよ。最初にリストを見てみよう。

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

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

<manyosyu volume="1">

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

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

  <poem no="0028" poet="持統天皇">
    春過ぎて 夏来たるらし 白妙(しろたえ)の 衣干したり 天の香具山
  </poem>

</manyosyu>

さらら: poemに属性no(歌番号)とpoet(作者)が追加されているわね。

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

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

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

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


■属性のテキストをひろう

さらら: 子ノードのテキストをひろう(取ってくる)のは前回もやったわね。

たけち: 子ノードのテキストをひろうのと似たようなものだよ。次に載せるね。それぞれ該当のDOMインターフェイス名を載せておくね。

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

さらら: 子ノードのときは、"childNodes"だったのが、"attributes"になっているのね。

たけち: そうそう。もう図で説明しなくてもわかるよね。

さらら: うっ、うん。。。。。 (^ ^;

たけち: じゃあ、おさらいのつもりで簡単に説明しておこうね。


■ノードに属性があるかどうかを調べる: hasChildNode

たけち: hasAttributesは、ノードに属性があるかどうかを調べるものなんだね。

さらら: あっ、属性があれば" true "、属性がなければ"false"になるのよね。そうでしょ?!

たけち: そうそう。いいよね。あっ、そうだ、今回のサンプルではこのhasAttributesは使わないからね。

さらら: えっ、どうして??

たけち: hasAttributesはmsxmlではサポートされていないんだ。

さらら: そうなんだぁ・・・・・


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

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

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

DOM: attributes.length


■属性の値(テキスト)をひろう: childNodes.item(int index).text

たけち: 最後は、属性の値(テキスト)を調べるattributes.item(int index).textだ。

さらら: あら、子ノードのテキストをとってくるのとほとんど同じね。

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

attributes
属性を示します
item(int index)
index番目の属性を示します。indexは、0から始まります。ですから、item(0)は最初のノードです。
text
見ている属性のテキストをとってきます。

さらら: えぇ。わかるわ。

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

DOM: attributes.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-2.xml");

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

        // ルートノードの属性(volume)を取得してstring文字列に追加代入します
    var volno = xml_doc.documentElement.attributes.item(0).text;
    string += "■万葉集のvolume(属性)は、" + volno + " です。<br/>" ;

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

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

            // 子ノードの数を調べます
        var j = xml_doc.documentElement.childNodes.length ;
        string += "■子ノード(poem)の 歌番号(no),作者(poet) をリストします。<br/>" ;

        // 子ノードpoemのno(属性)とテキストをとってstring文字列に追加代入します
        var no = "";
        var poet ="";

        while (i < j) {
        no = xml_doc.documentElement.childNodes.item(i).attributes.item(0).text;
        poet = xml_doc.documentElement.childNodes.item(i).attributes.item(1).text;
        string += "歌番号="+ no + ", " ;
        string += " 作者=" + poet + "<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">- attributes.item(i).text -</h3>

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

</body>
</html>

さらら: よく見ると「ルートノードの属性(volume)を取得」のところは前回もやっていたのね。気が付かなかったわ。

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

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

さらら: 少しずつなら分かっていけそう・・・

たけち: あわてずゆっくりやっていこうね。じゃあ、今回はここまで。おつかれさま。つぎも「属性」が出てくるかもね。

さらら: あっ、そうなの。たのしみだわ。。。 (^ ^*

→次は次のノードを見る(nextSibling)他です。 (^ ^;