HTML

各種項目

HTML

ダイナミックHTML

HTML5

audio要素

canvas要素

video要素


XHTML

Mobile Profile

C-HTML


HTML要素

HTMLフレーム（英語版）

HTML エディター

文字符号化（英語版）

Unicode（英語版）


Document Object Model

スタイルシート（CSS）

フォントファミリー（英語版）

ウェブカラー

HTMLスクリプティング（英語版）

JavaScript

WebGL

WebCL


W3C（バリデータ）

WHATWG

後方互換モード（英語版）

ウェブストレージ

レンダリングエンジン

比較

マークアップ言語（英語版）

HTML（英語版）

XHTML（英語版）

.mw-parser-output .hlist ul,.mw-parser-output .hlist ol{padding-left:0}.mw-parser-output .hlist li,.mw-parser-output .hlist dd,.mw-parser-output .hlist dt{margin-right:0;display:inline-block;white-space:nowrap}.mw-parser-output .hlist dt:after,.mw-parser-output .hlist dd:after,.mw-parser-output .hlist li:after{white-space:normal}.mw-parser-output .hlist li:after,.mw-parser-output .hlist dd:after{content:" ・\a0 ";font-weight:bold}.mw-parser-output .hlist dt:after{content:": "}.mw-parser-output .hlist-pipe dd:after,.mw-parser-output .hlist-pipe li:after{content:" |\a0 ";font-weight:normal}.mw-parser-output .hlist-hyphen dd:after,.mw-parser-output .hlist-hyphen li:after{content:" -\a0 ";font-weight:normal}.mw-parser-output .hlist-comma dd:after,.mw-parser-output .hlist-comma li:after{content:"、";font-weight:normal}.mw-parser-output .hlist-slash dd:after,.mw-parser-output .hlist-slash li:after{content:" /\a0 ";font-weight:normal}.mw-parser-output .hlist dd:last-child:after,.mw-parser-output .hlist dt:last-child:after,.mw-parser-output .hlist li:last-child:after{content:none}.mw-parser-output .hlist dd dd:first-child:before,.mw-parser-output .hlist dd dt:first-child:before,.mw-parser-output .hlist dd li:first-child:before,.mw-parser-output .hlist dt dd:first-child:before,.mw-parser-output .hlist dt dt:first-child:before,.mw-parser-output .hlist dt li:first-child:before,.mw-parser-output .hlist li dd:first-child:before,.mw-parser-output .hlist li dt:first-child:before,.mw-parser-output .hlist li li:first-child:before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child:after,.mw-parser-output .hlist dd dt:last-child:after,.mw-parser-output .hlist dd li:last-child:after,.mw-parser-output .hlist dt dd:last-child:after,.mw-parser-output .hlist dt dt:last-child:after,.mw-parser-output .hlist dt li:last-child:after,.mw-parser-output .hlist li dd:last-child:after,.mw-parser-output .hlist li dt:last-child:after,.mw-parser-output .hlist li li:last-child:after{content:")\a0 ";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li:before{content:" "counter(listitem)" ";white-space:nowrap}.mw-parser-output .hlist dd ol>li:first-child:before,.mw-parser-output .hlist dt ol>li:first-child:before,.mw-parser-output .hlist li ol>li:first-child:before{content:" ("counter(listitem)" "}.mw-parser-output .navbar{display:inline;font-size:75%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}.mw-parser-output .infobox .navbar{font-size:88%}.mw-parser-output .navbox .navbar{display:block;font-size:88%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}

表

話

編

歴

Document Object Model（DOM、日: ドキュメントオブジェクトモデル[1]）は、マークアップがなされたリソース（Document）をリソース要素（Object）の木構造（Model）で表現し操作可能にする仕組み、またそのモデルである。

DOMは、HTML文書やXML文書（あるいはより単純なマークアップされた文章など）をオブジェクトの木構造モデルで表現することで、ドキュメントをプログラムから操作・利用することを可能にする仕組みである[2]。Documentの種類、操作に用いるプログラミング言語の種類に依存しない仕様である[3]。

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アプリまで）を対象とする[4]。マークアップとは文章（例: `これは文章です`）の一部を意味づけしたり構造を示したりするために付与される文字列であり（例: `<主語>これは</主語><述語>文章です</述語>`）、すなわちDOMはマークアップによる構造をもったリソースを対象としている。
表現: Object木モデル

DOMはDocumentをObjectの木構造として表現する。Document内にはマークアップによって区切られるまとまりがあり、各まとまりを特定種のオブジェクトで表現する（例: <主語>これは</主語> = 主語オブジェクト)。DOMにおいてオブジェクトは総称してNodeと呼ばれる[5]。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

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つはドキュメントをプログラムから解釈・操作可能にすることである。