たのしいXML: DOMとJavaScript

DOMとJavaScript: XMLドキュメントを読み込む

2001年7月15日(日)更新

■簡単なXMLドキュメントとDOM

たけち: これからJavaScriptでDOMを使うサンプルを作りながら勉強していきたいんだけど、まずはXMLドキュメントやJavaScriptの関係を確認しておこうね。

さらら: あぁ、いよいよ始まるのね。なんだかドキドキするわ。難しくないかしら…

たけち: そんなに心配はいらないよ。いままでと同じように、Internet Explorerとmsxmlだからね。

さらら: あっ、そうなの? JavaScriptを使うのに何か特別なものはいらないの?

たけち: あっ、それはInternet Explorerがあればいいんだよ。だいたいどんな風になるのかを図に載せておくね。

XMLドキュメントとDOMとJavaScriptの関係

さらら: 図にあるようにJavaScriptで、XMLドキュメントを読み込んだり、DOMにアクセスしたりするプログラムを書くってことね。それと、DOMにアクセスするには、msxmlが要るのね。

たけち: そうそう。じゃぁ、まずごくごく基本的なところからやっていこう。そのためには、簡単なXMLドキュメントを作っておこうね。

さらら: そうね。簡単なのをお願いね。

たけち: じゃ、次のXMLドキュメントを見て。

■簡単なXMLドキュメントサンプル

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

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

さらら: あら、ずい分簡単ね。これなら問題なさそう。

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

サンプルXMLドキュメントのDOMツリー

たけち: DOCUMENTノードの下に、poemという名前のELEMENTノードがあって、その子供としてTEXTノードがあるよね。

さらら: DOCUMENTノードってどんなXMLドキュメントにもあるのね。

たけち: そうだね。サンプルXMLドキュメントの概要がわかったところで、次は、JavaScriptでXMLドキュメントを読み込んだり、DOMを使ってノードの情報を読んだりするための基本的なことを説明しようね。

さらら: うん。

■XMLドキュメントを読むための基本

たけち: だいたい、つぎのような流れになるんだ。

XMLドキュメントをDOMで扱うためのオブジェクトを作る
XMLドキュメントを読み込む
DOMを使って各ノードにアクセスする

さらら: オブジェクトってなぁに?

たけち: う～ん。。。ひとことでは説明しにくいんだけど、ここでは、XMLドキュメントを扱ってくれるもの、って考えておいて。今はすっきりしないかもしれないけど、サンプルを勉強していくと分かってくると思うからね。

さらら: うっ、うん。「もの」ねぇ・・・・まぁ、いいわ。

たけち: じゃ。順に説明していくね。

■XMLドキュメントをDOMで扱うためのオブジェクトを作る

たけち: 次の図に、XMLドキュメントをDOMで扱うためのオブジェクトを作るためのJavaScript文を載せておくね。

さらら: 意味はよく分からないわ。でも、とにかくこう書けばいいのよね。 (^ ^;

たけち: そうだね。ここでは、こう書くんだ、て覚えておくだけでいいよ。ところで、変数の名前を変えたいときには、図のxml_documentのところを変えればいいから。このあとは、この変数名を使って、XMLドキュメントを読み込んだり、DOMを使って各ノードにアクセスすることができるんだよ。

さらら: じゃ、ともかくこう書くっていうことね。いいわ。

たけち: じゃ。次ね。

■XMLドキュメントを読み込む

たけち: 次の図に、XMLドキュメントを読み込む作るためのJavaScript文を載せておくね。

さらら: これならなんとなくわかった気になるわ。

たけち: そうだね。あとは、読み込んだXMLドキュメントのノードや内容をDOMを使って読むんだけど、こんかいはごく簡単なことをやってみるからサンプルについて説明するね。。

さらら: うん、そうして。

■サンプルJavaScriptの主な流れ

たけち: 次の図に、今回のサンプルで行うことの主な流れを描いておくね。実際にDOMを使うのは一箇所だけで、サンプルとして作ったXMLドキュメントのルートELEMENTの名前をとってくるだけなんだ。

さらら: だいたいの流れはわかったわ。でも、って、ずい分と長いのね。

たけち: そうだね。でも、その分、分かりやすいとは思うんだけど・・・ (^ ^;
documentElement.nodeNameは次の二つのDOMインターフェイスから成っているんだ。

documentElement: XMLドキュメントのルートノードを示します
nodeName: ノードの名前を持ってきます。ただし、ELEMENT, ATTRIBUTE, TEXTなど、そのノードのタイプによって持ってくる内容が違います。ELEMENTノードの場合には、もちろん、タグ名ですよ。

さらら: そうなんだぁ。。。。わかったわ。ねぇ、たけち、そろそろ実際のサンプルを見てみたいわ。

たけち: そうだね。じゃぁ、次にJavaScriptを書いたHTMLテキストを載せておくね。

■JavaScriptサンプル

<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ドキュメント"poem.xml"を読み込む
   xml_doc.load("poem.xml");

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

      // ルートノード名を取得してstring文字列に代入する
   string = "XMLドキュメントのルートノード名は "
   + xml_doc.documentElement.nodeName
   + " です。";

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

<body onload="display()">
<p align="center">たのしいXML: DOMサンプル</p>
<div id="poem" align="center"></div>

</body>
</html>

さらら: あら、いままで出てこなかった文があるけど・・・・

たけち: いくつか説明をしてこなかったけど、innerHTMLだけは説明をしておこうね。innerHTMLは、HTMLの中のノードを指定したノードで置き換えるんだ。Microsoftの独自の仕様なんだけどね。

poem.innerHTML = string;

という文で、stringに入れた文字列を、poemというidをつけたdivのところに入れているんだね。

さらら: そうなんだ。。。。

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

JavaScriptサンプル　dom-1.htmlの表示結果

たけち: どう? さらら。少しはわかった?

さらら: だいたいの感じはわかったわ。でも、すぐ忘れちゃいそう・・・・

たけち: そうだね。でも、これからいくつもサンプルをやっていけばだんだん頭に残っていくと思うんだ。

さらら: うん、そうね。

たけち: 長くなっちゃったから今回はここまでにしておくね。おつかれさま。

さらら: は～い!! (^ ^*

→次回は、子ノードを調べる、他です。 (^ ^;

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

xml_doc .async = false;: XMLドキュメントの読み込みを非同期にしない(同期にする)という指定です。非同期にすると、指定したXMLドキュメント(ここではxml_doc)の読み込みの完了を待たないで他の処理をすることができます。ここでのサンプルとして作るXMLドキュメントはごく小さいので、このように指定しておきます。
innerHTML: innerHTMLは、HTMLの中のノードを指定したノードで置き換える、Microsoftの独自の仕様ですが、Internet Expolorerだけでなく、MozillaでもinnerHTMLをサポートしているようです。