Document Object Model(DOM、)は、マークアップがなされたリソース(Document)をリソース要素(Object)の木構造(Model)で表現し操作可能にする仕組み、またそのモデルである。

DOMは、HTML文書やXML文書(あるいはより単純なマークアップされた文章など)をオブジェクトの木構造モデルで表現することで、ドキュメントをプログラムから操作・利用することを可能にする仕組みであるAPIと言われることが多いが、一応APIではない。Document Object Model (DOM) Level 1 Specification。Documentの種類、操作に用いるプログラミング言語の種類に依存しない仕様であるAbstract. DOM defines a platform-neutral model for events, aborting activities, and node trees. DOM Living Standard.。

WHATWGがLiving Standardとして定義している。WHATWG以前はW3Cが仕様を策定しており、Level 1からLevel 4まで勧告している。

XMLを読み込むAPIであるSAXと異なり、XMLデータをツリー構造として扱う事ができる。ただし、通常の場合対象のXML文書を全て読み込んでからの扱いを前提とするため、動作速度が遅かったり、メモリーの使用量が大きくなるといった欠点もある。

DOMの実装は各メーカーに委ねられており、DOMを実装したXMLパーサが各メーカーから提供されている。

概要 DOMは、マークアップがなされたリソース(Document)をリソース要素(Object)の木構造(Model)で表現し操作可能にする。

対象: Document DOMはDocument(マークアップがなされたあらゆるリソース: 日記から論文、インタラクティブなWebアプリまで)を対象とするIn this specification, the term "document" is used for any markup-based resource, ranging from short static documents to long essays or reports with rich multimedia, as well as to fully-fledged interactive applications. DOM Living Standard。マークアップとは文章(例: `これは文章です`)の一部を意味づけしたり構造を示したりするために付与される文字列であり(例: `これは文章です`)、すなわちDOMはマークアップによる構造をもったリソースを対象としている。

表現: Object木モデル DOMはDocumentをObjectの木構造として表現する。Document内にはマークアップによって区切られるまとまりがあり、各まとまりを特定種のオブジェクトで表現する(例: これは = 主語オブジェクト)。DOMにおいてオブジェクトは総称してNodeと呼ばれるDocument, DocumentType, DocumentFragment, Element, Text, ProcessingInstruction, and Comment objects (simply called nodes) participate in a tree, DOM Living Standard。Nodesは入れ子構造をとるため、これを木構造(親Nodeと子Nodeの入れ子構造)でモデル化できる。このようにDOMはマークアップされたまとまり/オブジェクトの木構造モデルによってドキュメントを表現する。

例 以下はDOMを説明する文章に、各部分が意味する内容をマークアップしたものである。<!--マークアップがなされたリソース--> <タイトル>DOMとはなにか</タイトル> <本文><1行概要>DOMとはドキュメントをオブジェクトの木構造を示したものである。</1行概要><詳細>すなわちマークアップがなされたリソースを要素オブジェクトの入れ子構造でモデル化したものである。オブジェクトの例として<リスト>Element</リスト><リスト>Text</リスト><リスト>Comment</リスト>が挙げられる。</詳細></本文>このDocumentを木構造として表現すると以下のようになる。<!--木構造で表現されたリソース--> <タイトル>DOMとはなにか</タイトル> <本文> <1行概要> DOMとはドキュメントをオブジェクトの木構造を示したものである。 </1行概要> <詳細> すなわちマークアップがなされたリソースを要素オブジェクトの入れ子構造でモデル化したものである。 オブジェクトの例として <リスト>Element</リスト> <リスト>Text</リスト> <リスト>Comment</リスト> が挙げられる。 </詳細> </本文>さらに各要素をObjectとして表現することでDOMのnode tree表現が以下のように得られる。 代替文=DOM node tree|なし|サムネイル|982x982ピクセル|DOM node tree

nodeはプログラムからアクセス可能なオブジェクトであり、このDOMで定義されるnode treeを操作することでDocumentをプログラムから操作できる。例えば新しいnodeを追加したり、特定のnodeを検索して内容を得たりする(一行概要のTextを取得する)ことが可能になる。

他技術との関係 DOMはその起源からしてHTMLをはじめとするWeb技術との関わりが非常に深い。現在ではより一般化された"ドキュメント"を木構造として扱う仕様として定義されている。

HTML HTMLは「ハイパーテキストマークアップ言語」の名が示す通りマークアップされたリソースであり、DOMの対象ドキュメントとして扱える。WebブラウザはDOMを実装することでHTMLを解釈・表示し、またJavaScript等のプログラミング言語からの操作を可能にしている。

一方あくまでDOMはHTMLと切り離された仕様である。<button>などのHTML要素はHTML仕様でその振る舞い(click可能という振る舞いなど)や属性等を含むDOM Interfaceが定義されている。DOM仕様は個別要素の振る舞いには一切ふれず、Objectをどう木構造として扱うかのみを定義している。

JavaScript DOMの目的の1つはドキュメントをプログラムから解釈・操作可能にすることである。JavaScriptがWebブラウザ用スクリプト言語として誕生した背景から、JavaScriptとDOMには密接な関係がある初期には JavaScript と DOM は強く結びついていましたが、最終的には別々の存在ととして発展しました。 DOM の紹介 - DOM と JavaScript. MDN Web Docs。WebブラウザはDOMを実装しdocumentオブジェクトなどを介することで、JavaScriptに対してDOMへのアクセスを提供している。いわゆるWebアプリはHTMLで書かれたドキュメントをDOMによって操作可能にしJavaScriptでアプリケーションとしての動作を実現している。

一方あくまでDOMはJavaScript(ECMAScript)と切り離された仕様である。JavaScriptはNode.jsをはじめとした非ブラウザ(DOM非存在下)で完全に動作し、実際に広く利用されている。JavaScriptの視点からみたDOMの操作は、単なるdocumentobjectの操作であり、JavaScript仕様におけるObjectの操作に過ぎない。またDOMはあくまで言語に依存しないinterface仕様であり、実際にJavaScript以外の言語によるDOMの操作がおこなわれている。

標準

W3CのDOM作業部会は最終勧告を公開した後、2004年に解散。開発はWHATWGに移行し、現在もリビングスタンダードとして維持されている。 2009年にはWeb ApplicationsグループがW3CでDOMの活動を再編した。 2013年、進展の遅れとHTML5のリリースが迫っていたため、DOM Level 4の仕様はHTML作業部会に再割り当てされ、完成が促進された。 その後、2015年にはWeb Applicationsグループが解散し、DOMの管理はWeb Platformグループに引き継がれた。 W3Cは、2015年のDOM Level 4の公開以降、WHATWGの標準を基にしたスナップショットから新しい勧告を作成している。

DOM Level 1は、HTMLまたはXMLドキュメント全体の完全なモデルを提供し、ドキュメントの任意の部分を変更する手段も含まれていた。 DOM Level 2は2000年後半に公開され、getElementById関数やイベントモデル、XML名前空間およびCSSのサポートが導入された。 DOM Level 3は2004年4月に公開され、XPathやキーボードイベント処理、ドキュメントをXMLとしてシリアライズするインターフェースが追加された。 HTML5は2014年10月に公開され、HTML5の一部がDOM Level 2 HTMLモジュールを置き換えた。 DOM Level 4は2015年に公開され、2020年11月に廃止された。 DOM 2020-06は2021年9月にW3C勧告として公開され、WHATWGリビングスタンダードのスナップショットである。

参照

関連

SAX ダイナミックHTML

外部リンク Document Object Model (DOM) Specifications - W3C DOM について Gecko DOM Reference DOM Central - Netscape DevEdge