Document Object Model (DOM) について

Document Object Model（DOM、ドキュメントオブジェクトモデル）は、マークアップされたリソース（ドキュメント）を、その構成要素（オブジェクト）の木構造として表現し、操作を可能にするためのモデルです。DOMは、HTMLやXMLといったマークアップ言語で記述された文書を、プログラムからアクセスし、動的に変更するための基盤となる技術です。

DOMの概要

DOMは、ウェブページやアプリケーションにおけるデータの構造を、木構造のオブジェクトモデルとして表現します。これにより、JavaScriptなどのスクリプト言語を使って、ドキュメントの内容を読み取ったり、変更したりすることが可能になります。DOMは、特定のプログラミング言語やドキュメントの種類に依存せず、標準化されたインターフェースを提供します。

DOMの対象となるもの

DOMは、マークアップが施されたあらゆるリソースを対象とします。これは、単純なテキスト文書から複雑なウェブアプリケーションまで、広範囲に及びます。マークアップとは、文章の構造や意味を定義するために付与される文字列のことで、DOMはこのマークアップによって構造化されたリソースを扱うことができます。

オブジェクトの木構造モデル

DOMは、ドキュメントをオブジェクトの木構造として表現します。ドキュメント内の各要素は、オブジェクトとして表現され、これらのオブジェクトは親子関係を持つことで木構造を形成します。この木構造を操作することで、ドキュメントの内容を動的に変更できます。DOMにおけるオブジェクトは「ノード」と呼ばれ、テキスト、要素、属性などがノードとして表現されます。

DOMの具体的な例

例えば、HTML文書内の`

`要素は、DOMでは「h1要素ノード」として表現されます。このノードには、テキストコンテンツや属性などの情報が含まれており、JavaScriptなどのプログラムからアクセスし、操作することができます。DOMは、このようなノードの集合体として、ドキュメント全体を表現します。

DOMと他の技術の関係

DOMは、ウェブ技術と密接な関係があります。特に、HTML、JavaScriptとの連携は重要です。

HTML

HTMLは、ウェブページの構造を記述するためのマークアップ言語です。ブラウザは、HTML文書を解析し、DOMツリーを生成することで、ページを表示します。また、DOMは、JavaScriptからHTML要素を操作するためのインターフェースを提供します。HTML要素はDOMのインターフェースを通じて、その振る舞いや属性が定義されます。DOMの仕様自体は、要素の振る舞いには関与せず、オブジェクトの木構造を扱うことに特化しています。

JavaScript

JavaScriptは、ウェブページを動的に操作するためのスクリプト言語です。JavaScriptは、DOMを通じてHTML要素にアクセスし、その内容を変更したり、イベントを処理したりできます。Webアプリケーションは、HTMLで書かれたドキュメントをDOMによって操作し、JavaScriptでアプリケーションとしての動作を実現しています。DOMは、JavaScriptからみた場合、単なるオブジェクトの操作として扱われます。また、DOMはJavaScriptに限らず、他の言語からも操作することができます。

DOMの標準化

DOMの標準化は、W3C（World Wide Web Consortium）によって始まり、後にWHATWG（Web Hypertext Application Technology Working Group）に引き継がれました。現在、DOMはWHATWGによってリビングスタンダードとして維持されており、継続的に更新されています。

DOMの歴史

- DOM Level 1: ドキュメント全体のモデルを提供し、ドキュメントの変更を可能にしました。
- DOM Level 2: `getElementById`関数やイベントモデル、XML名前空間、CSSのサポートが追加されました。
- DOM Level 3: XPath、キーボードイベント、XMLシリアライズのインターフェースが追加されました。
- DOM Level 4: HTML5の一部を置き換え、最新のDOM標準を提供しました。しかし、その後廃止されました。
- DOM 2020-06: WHATWGリビングスタンダードのスナップショットを基に作成されたW3C勧告です。

他の技術との関連

- SAX: XMLを解析するための別のAPIで、DOMとは異なり、XMLデータをツリー構造ではなくイベントベースで扱います。
- ダイナミックHTML: DOMとJavaScriptを組み合わせて、動的なウェブページを作成する技術です。

参照

もう一度検索