DOMとJavaScript: DOMってなぁに?

2006年04月23日(日)更新


■DOMってなぁに?

さらら: ねぇ、たけち。DOM(ドム)って初めて聞いた言葉なんだけど・・・・

たけち: DOMはDocument Object Model(ドキュメント・オブジェクト・モデル)っていって、HTMLやXMLドキュメント(文書)のデータがどのように構成されるかを定義したデータモデルと、それをソフトウェアで扱うためのインターフェイスを定義しているんだ。XMLと同じようにW3Cの勧告となっているんだよ。

さらら: うっ、うん。。。。なんだか難しそうね。これまで勉強してきたXSLスタイルシートだけじゃだめなの?

たけち: うん。。。。。プログラムでDOMを使うとXMLドキュメントの構造をたどって、要素や内容を追加したり、変更したりがぐっと自由にできるんだよ。

さらら: へぇ〜。じゃあ、XSLスタイルシートだとうまくいかなかったこともできるようになるのね。。。。。でも、プログラムってJavaとか、そういう言語で書くんでしょ? そんなの私には無理だわ。

たけち: それがね。JavaScriptでもDOMを使うことができるんだよ。

さらら: あらっ。JavaScriptって、HTMLでよく見かける、あれね。そうなんだぁ・・・ねぇ。だったら私だって、たけちといっしょだったら分かるかしら。

たけち: どう? やってみようか。

さらら: ・・・・は〜い!!

たけち: じゃ、とりあえずDOMってどんなものかを見てみようね。

さらら: うん。


■DOMの概要

たけち: DOMはLevel-1が1998年10月1日 W3C勧告になってから、Level-3までが定義されているんだ。次に主なものを載せておくね。詳しくは、http://www.w3.org/DOM/に載っているよ。

■DOM Level-1 :
    http://www.w3.org/TR/REC-DOM-Level-1/
1998年10月1日 W3C Recommendation(勧告)
■DOM Level-2 Core Specification :
    http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/
2000年11月13日 W3C Recommendation(勧告)
■DOM Level-3 Core Specification :
    http://www.w3.org/TR/DOM-Level-3-Core/
2004年04月07日 W3C Recommendation(勧告)

さらら: へぇ〜。難しそう〜。。。

たけち: うん。かなりの仕様が公開されているから全部見るのはとても大変なんだ。だけど、実際に僕たちが使うのはそんなに複雑なことはやらないからだいじょうぶだよ。前にXPathなんかも勉強してるから、心配ないよ。まず、ここでは、DOMではXMLデータの要素や属性などがどのようなものから成り立っているか、ということをみておくね。

さらら: えっ、えぇ。。

たけち: ということで、まずは、DOM Level-1の概要を説明しておくね。詳しくは、あとでやってゆく具体的なサンプルのときに何度も説明することになると思うから、今回はざっと眺めるだけでいいよ。

さらら: は〜い。

たけち: DOM Level-1には、コアインターフェイスとHTMLインターフェイスがあるんだ。図に載せておくね。

DOM Level-1の構成

■DOMの概要: ドキュメントモデル

たけち: DOMのドキュメントモデルを理解するには、XPathで勉強したように、ツリー構造(木構造)で考えるといいんだよ。

さらら: ということは、XPathのデータモデルのような感じってことね。ノードとか・・・・

たけち: あっ、思い出したみたいだね。その調子、その調子。。。。。次に、DOM Level-1/Level-2で定義されている12個のノードを載せておくね。ビンとくるものもあるだろうし、ちょっと分かりにくいものもあるかも知れないけどね。

DOMのノード: ドキュメント・ノード

DOMのノード: ドキュメント・フラグメント

DOMのノード: エンティティ・リファレンス

DOMのノード: エレメント(要素)

DOMのノード: アトリビュート(属性)

DOMのノード: エンティティ

DOMのノード: 子ノードを持たないノード

さらら: やっぱり、いっぺんに見せられると混乱しちゃうわね。それに、英語ばっかりね・・・・(^ ^;

たけち: そうだね。そのうちJavaScriptのDOMを使ったサンプルを載せるようになるけど、そのときにはDOMで定義されている名前を使うことになるから、最初っから英語で載せておくね。慣れるためにもね。

さらら: いいの。ちょっと言ってみただけだから。

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

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

※JavaScriptでDOMを扱う:
    → 次はJavaScriptでXMLドキュメントをDOMでアクセスします (^ ^;


※JavaでDOMを扱う:
    → 次はDOM: DOCUMENTノードから始めましょうです。 (^ ^;