初めてのDOM〜DOMの概念

JavaScript
スポンサーリンク

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レベル1について見ていきます。

DOMレベル1について

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)
 

(DOM4) (Working Draft)

ドキュメントをツリー構造で表現

dom1
DOMはドキュメントツリーとして扱います。
簡単な例で見てみましょう。

<html>
	<head>
		<title>Sample</title>
	</head>
	<body>
		<h1>Sample1</h1>
		<p>簡単な<em>サンプル</em>のテキストです。</p>
	</body>
</html>	

上の例をツリー構造にしたものです。
図1
dom1

*文書ツリーはブラウザで多少解釈が違う部分があります。
具体的にはIEでは(またIEです)ノード間の空白や改行を無視します。また、title要素の内容のテキストノードを無視します。

ノードとは

図1の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には3つのレベルが存在します。レイヤーのような考え方ではなくバージョンといった方が解りやすいかもしれません。
DOMレベル1はコアDOMインターフェイス(NOde,Element,Attr,Documentなど)とHTMLインターフェイスを定義しています。
DOMレベル2ではコアインターフェイスの更新とドキュメントのイベント処理、CSSのための標準APIを定義しています。
DOMレベル2はモジュール化されており、必須モジュールのCoreはDocument,Node,Element,Textインターフェイスなどからなり、ドキュメントのツリー構造の基本部分を定義します。他にはHTMLモジュールやStyleSheetsモジュール,CSSモジュール

DOMのモジュール
モジュール名 仕様書 実装に必要なモジュール レベル(水準)
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の使い方は別途説明します。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

JavaScript
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました