DOMとは
多くの解説書ではDOMについて次のような説明がされています。
「DOM(Document Object Model)はドキュメントを構成するオブジェクトにアクセスする方法を定義したAPIです。
W3Cが標準DOM仕様を定義しています。」
何回読んでもDOMって一体何？と思ってしまいます。しかもJavaScriptを学習すると必ずDOMが登場します。
DOMDOM 🍔なら知っているけれどもDOMは明確に説明できない。
ここでしっかりとDOMの概念をまとめておきたいと思います。
標準DOMにいたる歴史
JavaScriptの話から始まります。DOMの概念は少し先になりますが、我慢してみていきましょう。
JavaScriptはNetscape社により開発されたスクリプトです。Microsoft社とのブラウザ戦争まっただ中に開発されたものですから、Netscape Navigator(NN)とInternet Exproler(IE)のスクリプトには非互換のもが多くあった事も頷けると思います。結局両者の競争はIEの無料配布などによりIEに軍配があがりました。
ダイナミックHTMLとイベントドリブンモデル
ここまでの歴史を振り返ってみると、なぜJavaScriptが登場しなければならなかったのでしょうか。
それはHTML文書になんらかのイベントが生じると動的にHTMLを変更する必要性が出てきたからかもしれません。あるいはそんな事ができると随分便利になるよという事だったかもしれません。それは例えばあるサムネイルをクリックすると別の位置にある大きな画像を入れ替えることも簡単にできます。
サンプル
そしてそれを実現したのがJavaScriptなのです。このようにJavaScript のようなスクリプトを使って HTML の内容を動的に変化させる概念を、ダイナミックHTMLと呼びます。
JavaScriptの簡単な例
JavaScriptはイベントに応じて実行するコードを記述するのが特徴です。
このようなプログラミングのことをイベントドリブンモデル（イベント駆動モデル）といいます。
そして、イベントに反応して実行する処理のことをイベントハンドラといいます。
JavaScriptのコードを記述することはつまりイベントドリブンモデルを定義することにもなります。
そのポイントは以下のとおりです。
- イベントが発生した要素
- イベントの種類
- イベントハンドラとの関連づけ
簡単な例を見てみましょう。
<input type = "button" value="ダイアログ表示"
onclick="alert('ボタンがクリックされました');">
- イベントが発生した要素 input type=”button”
- イベントの種類:クリック
- イベントハンドラとの関連づけ：アラートが開く処理との関連付け onclick=”・・・”
この書き方はレガシーDOMな書き方です。
DOMレベル0(レガシーDOM)
標準DOMはレベル1からレベル3のレベル分けがされています。
レガシーDOMはレベル0とされ、JavaScript初期の頃の仕様でブラウザオブジェクトのことです。
そのためブラウザ依存します。
DOMレベル0参考
Netscape Navigator 3 と WinIE 3 が実装していた DHTML（ダイナミックHTML） 機能のうちの object model を指します。標準仕様は存在しませんし、 NN と IE で非互換な部分も少なくありません。
「DOM0」の範囲は曖昧ですが、次の機能の一部を指して DOM0 と言うことがあります。
Window (HTML Standard)
Navigator (HTML Standard)
History (HTML Standard)
Location (HTML Standard / URL Standard)
BarProp (HTML Standard)
Screen (CSSOM View)
HTMLDocument (HTML Standard / 旧: DOM1 HTML/DOM2 HTML)
navigator.mimeTypes (HTML Standard)
navigator.plugins (HTML Standard)
String extras (JavaScript)
イベントハンドラーevent handler attributes (HTML Standard / 旧: HTML4)
Event (HTML Standard / DOM Standard / 旧: DOM2イベント/DOM3イベント)
IE4 DOM (HTML Standard / DOM Standard)
IEのイベントモデル
Netscape4のイベントモデル
IEのCSSOM
レガシーDOMつまりブラウザオブジェクトの使い方はまた別途説明することにして次はDOMレベル１について見ていきます。
DOMレベル１について
W3C により、仕様が勧告されています。
http://www.w3.org/DOM/
http://www.w3.org/TR/REC-DOM-Level-1/ (DOM Level 1)
http://www.w3.org/TR/DOM-Level-2-Core/ (DOM Level 2)
http://www.w3.org/TR/DOM-Level-3-Core/ (DOM Level 3)
ドキュメントをツリー構造で表現
DOMはドキュメントツリーとして扱います。
簡単な例で見てみましょう。
<html> <head> <title>Sample</title> </head> <body> <h1>Sample1</h1> <p>簡単な<em>サンプル</em>のテキストです。</p> </body> </html>
上の例をツリー構造にしたものです。
図１
＊文書ツリーはブラウザで多少解釈が違う部分があります。
具体的にはIEでは（またIEです）ノード間の空白や改行を無視します。また、title要素の内容のテキストノードを無視します。
ノードとは
図１のDOMツリーはNodeオブジェクトによって構成されています。ノードとは文書を構成する要素や属性そしてテキストなどのオブジェクトのことを言います。
それぞれ要素ノード、属性ノード、テキストノードなどと呼んだりします。DOMはこれらのノードを抽出したり追加したり、あるいは削除したりするための手段でもあります。
| インターフェイス | node Type 定数 | node Typeの値 |
|---|---|---|
| Elemnet | Node.ELEMENT_NODE | 1 |
| Text | Node.TEXT_NODE | 3 |
| Document | Node.DOCUMENT_NODE | 9 |
| Commnet | Node.COMMENT_NODE | 8 |
| DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 |
| Attr | Node.STTRIBUTE_NODE | 2 |
DOMのレベル
DOMには３つのレベルが存在します。レイヤーのような考え方ではなくバージョンといった方が解りやすいかもしれません。
DOMレベル１はコアDOMインターフェイス（NOde,Element,Attr,Documentなど）とHTMLインターフェイスを定義しています。
DOMレベル２ではコアインターフェイスの更新とドキュメントのイベント処理、CSSのための標準APIを定義しています。
DOMレベル２はモジュール化されており、必須モジュールのCoreはDocument,Node,Element,Textインターフェイスなどからなり、ドキュメントのツリー構造の基本部分を定義します。他にはHTMLモジュールやStyleSheetsモジュール,CSSモジュール
| モジュール名 | 仕様書 | 実装に必要なモジュール | レベル（水準） |
|---|---|---|---|
| Core | Core | – | 1, 2, 3 |
| XML | Core | Core | 1, 2, 3 |
| HTML | HTML | Core | 1, 2 |
| Views | Views (Level 2), Views and Formatting (Level 3) | Core | 2, 3 |
| VisualViewsAndFormatting | Views and Formatting | ViewsAndFormatting | 3 |
| StyleSheets | Style | Core | 2 |
| CSS | Style | Views, StyleSheets | 2 |
| CSS2 | Style | CSS | 2 |
| Events | Events | Core | 2, 3 |
| UIEvents | Events | Views, Events | 2, 3 |
| MouseEvents | Events | UIEvents | 2, 3 |
| TextEvents | Events | UIEvents | 3 |
| KeyboardEvents | Events | UIEvents | 3 |
| MutationEvents | Events | Events | 2, 3 |
| MutationNameEvents | Events | MutationEvents | 3 |
| HTMLEvents | Events | Events | 2, 3 |
| Traversal | Traversal and Range | Core | 2 |
| Range | Traversal and Range | Core | 2 |
| LS | Load and Save | Core | 3 |
| LS-Async | Load and Save | LS | 3 |
| Validation | Validation | Core | 3 |
| XPath | XPath | Core | 3 |
| LS-AS | Abstruct Schemas | LS | 3 |
| AS-READ | Abstruct Schemas | Core | 3 |
| AS-EDIT | Abstruct Schemas | Core, LS-AS | 3 |
| AS-DOC | Abstruct Schemas | Core, LS-AS | 3 |
DOMの使い方は別途説明します。
コメントを投稿するにはログインしてください。