ドキュメントオブジェクトモデル

ドキュメント オブジェクト モデル (DOM)

HTML 文書における DOM 階層の例
略語	DOM
初版	1998年10月1日; 26年前 ( 1998-10-01 )
最新バージョン	DOM4 [1] 2015年11月19日; 9年前 ( 2015-11-19 )
組織	ワールド ワイド ウェブ コンソーシアム、WHATWG
基本基準	WHATWG DOM リビングスタンダード W3C DOM4

ドキュメント オブジェクト モデル( DOM ) は、HTML または XML ドキュメントをツリー構造として扱うクロスプラットフォームで言語に依存しないインターフェイスです。ツリー構造では、各ノードがドキュメントの一部を表すオブジェクトです。DOM はドキュメントを論理ツリーで表します。ツリーの各ブランチはノードで終わり、各ノードにはオブジェクトが含まれます。DOM メソッドを使用すると、ツリーにプログラムからアクセスでき、ドキュメントの構造、スタイル、またはコンテンツを変更できます。^{[2]ノードには}イベント ハンドラー(イベント リスナーとも呼ばれます)を接続できます。イベントがトリガーされると、イベント ハンドラーが実行されます。^[3]

DOM の主要な標準化はWorld Wide Web Consortium (W3C) によって行われ、最後に勧告が策定されたのは 2004 年です。WHATWGが標準の開発を引き継ぎ、それをライブ ドキュメントとして公開しています。現在、W3C は WHATWG 標準の安定したスナップショットを公開しています。

HTML DOM（ドキュメントオブジェクトモデル）では、すべての要素はノードです。^[4]

• ドキュメントはドキュメント ノードです。
• すべての HTML 要素は要素ノードです。
• すべての HTML 属性は属性ノードです。
• HTML 要素に挿入されるテキストはテキスト ノードです。
• コメントはコメント ノードです。

ドキュメント オブジェクト モデルの歴史は、1990 年代後半のNetscape NavigatorとMicrosoft Internet Explorerの間で繰り広げられた「ブラウザー戦争」の歴史、およびWeb ブラウザーのJavaScript エンジンに広く実装された最初のスクリプト言語であるJavaScriptとJScriptの歴史と絡み合っています。

JavaScript は、1995 年にNetscape CommunicationsによってNetscape Navigator 2.0 に組み入れられてリリースされました。Netscape の競合企業であるMicrosoft は、翌年、JavaScript を再実装した JScript を搭載したInternet Explorer 3.0 をリリースしました。JavaScript と JScript を使用すると、 Web 開発者はクライアント側で対話できる Web ページを作成できます。これらの言語の第一世代には、ユーザーが生成したイベントを検出し、HTML ドキュメントを変更するための機能が限られていたため、最終的には「DOM レベル 0」または「レガシー DOM」と呼ばれるようになりました。DOM レベル 0 には独立した標準は開発されていませんが、 HTML 4の仕様で部分的に説明されています。

従来の DOM では、アクセスできる要素の種類が制限されていました。フォーム、リンク、および画像要素は、ルート ドキュメント オブジェクトで始まる階層名で参照できます。階層名では、走査される要素の名前または連続インデックスのいずれかを使用できます。たとえば、フォーム入力要素document.myForm.myInputには、またはのいずれかでアクセスできますdocument.forms[0].elements[0]。

レガシー DOM により、クライアント側のフォーム検証と、ツールチップの作成などのシンプルなインターフェースのインタラクティブ性が可能になりました。

1997 年、Netscape と Microsoft はそれぞれ Netscape Navigator と Internet Explorer のバージョン 4.0 をリリースし、読み込まれた HTML ドキュメントを変更できるダイナミック HTML (DHTML) 機能のサポートを追加しました。DHTML では、従来の DOM 実装で使用できる基本的なドキュメント オブジェクトの拡張機能が必要でした。JScript は JavaScript に基づいていたため、従来の DOM 実装はほぼ互換性がありましたが、DHTML DOM 拡張機能は各ブラウザー メーカーによって並行して開発され、互換性がありませんでした。これらのバージョンの DOM は、「中間 DOM」と呼ばれるようになりました。

ECMAScriptの標準化後、W3C DOM ワーキンググループは標準 DOM 仕様の草案作成を開始しました。完成した仕様は「DOM レベル 1」として知られ、1998 年後半に W3C 勧告となりました。2005 年までに、 W3C DOM の大部分は、Internet Explorer 6 (2001 年以降)、Opera、Safari、Geckoベースのブラウザー ( Mozilla、Firefox、SeaMonkey、Caminoなど) を含む一般的な ECMAScript 対応ブラウザーで十分にサポートされるようになりました。

W3C DOMワーキンググループは最終勧告を公開し、その後2004年に解散しました。開発作業はWHATWGに移行し、引き続き標準を維持しています。^[5] 2009年、WebアプリケーショングループはW3CでDOM活動を再編成しました。^[6] 2013年、進捗が遅く、HTML5のリリースが迫っていたため、DOMレベル4仕様は完成を早めるためにHTMLワーキンググループに再割り当てされました。 ^[7]一方、2015年にWebアプリケーショングループは解散し、DOMの管理はWebプラットフォームグループに移されました。^[8] 2015年のDOMレベル4の公開から、W3CはWHATWG標準のスナップショットに基づいて新しい勧告を作成しています。

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

HTMLページなどの文書をレンダリングするために、ほとんどのウェブブラウザはDOMに似た内部モデルを使用しています。すべての文書のノードはDOMツリーと呼ばれるツリー構造に編成されており、最上位のノードは「ドキュメントオブジェクト」と呼ばれます。ブラウザでHTMLページがレンダリングされると、ブラウザはHTMLをローカルメモリにダウンロードし、自動的に解析してページを画面に表示します。ただし、DOMは必ずしもツリーとして表現される必要はなく、^[11]一部のブラウザでは他の内部モデルを使用しています。^[12]

ウェブページが読み込まれると、ブラウザはページのドキュメントオブジェクトモデルを作成します。これは、JavaScriptとドキュメント自体の間のインターフェースとして機能するHTMLドキュメントのオブジェクト指向表現です。これにより、動的なウェブページの作成が可能になります。^[13]ページ内でJavaScriptは次のことができるためです。

• HTML要素や属性を追加、変更、削除する
• CSSスタイルを変更する
• 既存のすべてのイベントに反応する
• 新しいイベントを作成する

ドキュメント オブジェクト モデル (DOM) ツリーは、HTML またはXMLドキュメントの階層表現です。ドキュメント自体であるルート ノードと、ドキュメントの要素、属性、およびテキスト コンテンツを表す一連の子ノードで構成されます。ツリー内の各ノードには、ルート ノードを除いて親ノードがあり、複数の子ノードを持つことができます。

HTML または XML ドキュメント内の要素は、DOM ツリー内のノードとして表されます。各要素ノードにはタグ名と属性があり、他の要素ノードまたはテキスト ノードを子として含めることができます。たとえば、次の構造を持つ HTML ドキュメントがあります。

< html > 
  < head > 
    < title >私のウェブサイト</ title > 
  </ head > 
  < body > 
    < h1 >ようこそ</ h1 > 
    < p >これは私のウェブサイトです。</ p > 
  </ body > 
</ html >

DOM ツリーでは次のように表されます。

- ドキュメント（ルート）
  - html
    - 頭
      - タイトル
        - 「私のウェブサイト」
    - 体
      - h1
        - "いらっしゃいませ"
      - ピ
        - 「これは私のウェブサイトです。」

要素内のテキスト コンテンツは、DOM ツリー内のテキスト ノードとして表されます。テキスト ノードには属性や子ノードがなく、常にツリー内のリーフ ノードになります。たとえば、上記の例の title 要素内のテキスト コンテンツ「My Website」と h1 要素内の「Welcome」は、どちらもテキスト ノードとして表されます。

要素の属性は、DOM ツリー内の要素ノードのプロパティとして表されます。たとえば、次の HTML を持つ要素:

< a  href = "https://example.com" >リンク</ a >

DOM ツリーでは次のように表されます。

- 1つの
  - href: "https://example.com"
  - "リンク"

DOM ツリーは、JavaScript またはその他のプログラミング言語を使用して操作できます。一般的なタスクには、ツリーのナビゲート、ノードの追加、削除、変更、ノードのプロパティの取得と設定などがあります。DOM API には、、、、などのこれらの操作を実行するための一連のメソッドとプロパティが用意されgetElementByIdていcreateElementます。appendChildinnerHTML

// ルート要素を作成します
var root = document . createElement ( "root" );   

// 子要素を作成します
var child = document . createElement ( "child" );   


//ルート要素に子要素を追加します。root.appendChild ( child );

DOM 構造を作成する別の方法は、innerHTML プロパティを使用して HTML コードを文字列として挿入し、そのプロセスで要素と子を作成することです。例:

document.getElementById ( " root" ). innerHTML = " <child> </child>" ;  

もう 1 つの方法は、 jQuery、AngularJS、React、Vue.jsなどの JavaScript ライブラリまたはフレームワークを使用することです。これらのライブラリは、DOM を作成、操作、対話するためのより便利で簡潔かつ効率的な方法を提供します。

JavaScript メソッドを使用してデータを解析し、それに応じてノードを作成することで、XML または JSON データから DOM 構造を作成することもできます。

DOM 構造を作成しても、必ずしもそれが Web ページに表示されるわけではありません。DOM 構造はメモリ内にのみ存在し、レンダリングされるドキュメント本体または特定のコンテナーに追加する必要があります。

要約すると、DOM 構造を作成するには、JavaScript またはその他のプログラミング言語を使用して個々のノードを作成し、それらを階層構造に整理する必要があります。これは、ユースケースや開発者の好みに応じて、いくつかの方法で実行できます。

DOMはあらゆる方向（親や前の兄弟など）へのナビゲーションをサポートし、任意の変更が可能なため、実装では通常、ドキュメントをバッファリングします。^[14]ただし、DOMはシリアル化されたドキュメントから作成される必要はなく、DOM APIを使用してその場で作成できます。また、DOM自体よりも前にも、永続的なディスク表現と高速アクセスを備えた同等の構造の実装がありました。たとえば、^{[15]で公開されている}DynaTextのモデルやさまざまなデータベースアプローチなどです。

Web ブラウザはレイアウト エンジンを利用してHTML を DOM に解析します。Trident/MSHTML などの一部のレイアウト エンジンは、Internet Explorer などの特定のブラウザに主に関連付けられているか、または排他的に関連付けられています。Blink 、WebKit、Geckoなどのその他のレイアウト エンジンは、 Google Chrome、Opera、Safari、Firefoxなどの多数のブラウザで共有されています。レイアウト エンジンによって、DOM 標準への準拠度合いは異なります。

DOM実装:

• libxml2
• MSXML
• XercesはC++、Java、Perlで書かれたDOM実装のコレクションです。
• Pythonの xml.dom
• <SCRIPT>のXMLはJavaScriptベースのDOM実装である^[16]
• PHP.Gt DOMはlibxml2に基づくサーバーサイドDOM実装であり、 PHPプログラミング言語にDOMレベル4互換性^{[17]をもたらします。}
• Domino は、Mozilla の dom.js に基づくサーバー側 (Node.js) DOM 実装です。Domino は、ビジュアル エディターを備えたMediaWikiスタックで使用されます。
• SimpleHtmlDom は、プログラムで HTML 文字列を生成できる、C# のシンプルな HTML ドキュメント オブジェクト モデルです。

DOM 実装を公開する API:

• JAXP（Java API for XML Processing）はDOMプロバイダにアクセスするためのAPIです。
• Lazarus ( Free Pascal IDE) には、UTF-8 と ANSI 形式の 2 つの DOM が含まれています。

検査ツール:

• DOMインスペクタはウェブ開発者ツールです

• シャドウDOM
• 仮想DOM

• Flanagan, David (2006)。JavaScript : 決定版ガイド。O'Reilly & Associates。pp. 312–313。ISBN 0-596-10199-6。
• Koch, Peter-Paul (2001 年 5 月 14 日)。「ドキュメント オブジェクト モデル: 入門」。Digital Web Magazine。2017年 4 月 27 日時点のオリジナルよりアーカイブ。2009年1 月 10 日閲覧。
• Le Hégaret, Philippe (2002)。「W3C ドキュメント オブジェクト モデル (DOM)」。World Wide Web Consortium。2009年1 月 10 日閲覧。
• Guisset, Fabian. 「各 DOM レベルは何をもたらすのか?」。Mozilla Developer Center。Mozillaプロジェクト。2013 年 3 月 2 日時点のオリジナルよりアーカイブ。2009年1 月 10 日閲覧。

ウィキメディア・コモンズには、ドキュメント・オブジェクト・モデルに関連するメディアがあります。

• WHATWG による DOM Living Standard
• W3C DOM ワーキング グループによるオリジナルの W3C DOM ハブ (古い)
• W3C HTMLワーキンググループが公開したWHATWGリビングスタンダードの最新スナップショット
• Web プラットフォーム ワーキング グループ (W3C DOM の現在の管理者)