ドキュメント オブジェクト モデル (DOM) は、開発者が JavaScript などのスクリプト言語を使用して Web ドキュメントを操作できるようにする重要なインターフェイスです。DOM は、HTML や XML などの Web ドキュメントのコンテンツの構造化された階層的かつ論理的なビューをツリーのような構造として表します。
ドキュメント オブジェクト モデル (DOM) の起源
DOM の概念は、よりインタラクティブな Web コンテンツを実現する必要性から、1990 年代中期から後半にかけて初めて生まれました。動的な Web サイトの出現と JavaScript の普及により、スクリプトでドキュメントの構造、スタイル、コンテンツを変更できるモデルが必要になりました。World Wide Web Consortium (W3C) は、この目的のために標準化された API を作成するという作業を引き受け、DOM の開発につながりました。
最初の標準 DOM レベルである DOM レベル 1 は、1998 年に W3C によって導入されました。これは、ドキュメントの任意の部分を変更する手段を含む、HTML または XML ドキュメント全体の包括的なモデルを提供しました。
ドキュメント オブジェクト モデル (DOM) の拡張
DOM は本質的に、プログラムやスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できるようにする、プラットフォームおよび言語に依存しないインターフェースです。
DOM はノードの階層に編成されており、各ノードは要素、属性、テキストなど、ドキュメントの一部を表します。この論理ツリー構造により、ドキュメントの内容を簡単にナビゲートおよび操作できます。
Web ドキュメントは、プロパティとメソッドを持ち、他のオブジェクトを含むことができるオブジェクトのツリーとしてモデル化されます。たとえば、HTML ドキュメントは、「body」、「div」、「span」、「p」などの要素とその属性およびテキスト コンテンツを表すオブジェクトに変換されます。
ドキュメント オブジェクト モデル (DOM) の仕組み
DOMの内部構造はノードのツリーとして構成されています。最上位のノードは Document ドキュメント全体を表すノード。その下には Element ノードはページ内のHTML要素に対応し、 Attribute ノードは要素の属性を保持し、 Text ノードは要素のテキスト コンテンツを保持します。
この階層構造により、開発者はドキュメント ツリーをナビゲートし、API メソッドを使用してノードを選択、作成、変更、または削除できます。
HTML ドキュメントが DOM ツリーとしてどのように表示されるかの例を次に示します。
マセマティカDocument
↳ Element: html
↳ Element: head
↳ Element: title
↳ Text: "Title of the Document"
↳ Element: body
↳ Element: h1
↳ Text: "Hello, world!"
↳ Element: p
↳ Text: "This is a paragraph."
ドキュメント オブジェクト モデル (DOM) の主な機能
-
ツリー構造DOM はドキュメントを論理ツリー構造で表し、ナビゲーション、選択、操作を簡単かつ直感的に行えるようにします。
-
言語に依存しない: DOM は特定のプログラミング言語に縛られていません。HTML、XML、その他のドキュメント タイプ内のオブジェクトを表現し、操作するための規則です。
-
動的アクセスと更新: DOM を使用すると、プログラムはドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できます。
-
標準化された: DOM は W3C 標準であり、さまざまなブラウザやプラットフォームで広く受け入れられ、互換性があることが保証されています。
ドキュメント オブジェクト モデル (DOM) の種類
DOM 仕様はいくつかの「レベル」と「モジュール」に分かれており、それぞれが前のレベルに機能を追加します。主なタイプは次のとおりです。
| DOM レベル/タイプ | 簡単な説明 |
|---|---|
| DOM レベル 1 | 要素とその属性を操作するメソッドを含む、HTML または XML ドキュメント全体の基本モデルを提供しました。 |
| DOM レベル 2 | 名前空間の処理、CSS をサポートするスタイル モジュール、テーブルやイベントなどを処理するためのいくつかの新しいインターフェイスなどの機能を導入しました。 |
| DOM レベル 3 | XPath およびキーボード イベント処理のサポートが追加され、ドキュメントの読み込みと保存のためのインターフェイスが導入されました。 |
| DOM レベル 4 | 依存関係を減らすことでコア DOM を簡素化し、非同期操作の Promise を導入し、ノード操作を容易にする親機能などの機能を追加しました。 |
ドキュメント オブジェクト モデル (DOM) の活用
DOM は、JavaScript を使用して Web ページを操作するたびに使用されます。これは、多数の Web テクノロジーの基盤となる API です。
開発者は DOM を使用して、ページ全体を再読み込みすることなく Web ページの外観、操作性、コンテンツを動的に変更し、インタラクティブで応答性の高いユーザー インターフェイスを実現します。
DOM は強力ですが、問題がないわけではありません。特に大規模または複雑な Web ドキュメントでは、慎重に使用しないと遅くなることがあります。DOM 操作が適切に最適化されていないと、ページのレンダリングが遅くなり、インターフェイスが応答しなくなる可能性があります。この問題に対処するために、開発者は多くの場合、効率的な DOM 操作のための高レベル API を提供する jQuery、React、Vue.js などのライブラリやフレームワークを使用します。
DOM の特性と類似用語との比較
| 学期 | 説明 | 比較 |
|---|---|---|
| DOM | HTML および XML ドキュメント用の API。ドキュメントの構造表現を提供し、開発者がドキュメントのコンテンツと視覚的なプレゼンテーションを操作できるようにします。 | |
| CSSOM | CSS オブジェクト モデル (CSSOM) は、DOM に似ていますが CSS 専用の CSS スタイルのマップです。これにより、DOM に適用されたスタイルシートとスタイルを操作できます。 | DOM はドキュメント構造に重点を置いていますが、CSSOM はプレゼンテーション層に重点を置いています。 |
| シャドウDOM | Web コンポーネントの実装のために DOM ツリーの一部をカプセル化するメカニズム。DOM の一部を分離して、メインのドキュメント ツリーから「隠す」ことができます。 | 通常の DOM とは異なり、Shadow DOM はスタイルと動作のカプセル化を提供します。 |
ドキュメントオブジェクトモデル (DOM) に関する将来の展望
Web テクノロジーが進化し続けるにつれて、DOM API も拡張され、改善される可能性があります。今後の開発の可能性としては、DOM を操作するより効率的な方法、新しい Web 標準との統合の改善、HTML 仕様自体の継続的な進化などが挙げられます。
興味深い進行中の開発として、再利用可能なカプセル化された HTML タグの作成を可能にする Web コンポーネントの段階的な採用が挙げられます。これは、DOM 要素をカプセル化する手段を提供する Shadow DOM と密接に結びついています。
ドキュメント オブジェクト モデル (DOM) とプロキシ サーバー
プロキシ サーバーは、クライアントとサーバーの間で要求と応答を転送する仲介者です。DOM は主にクライアント側の Web ドキュメントの構造と操作に関係していますが、プロキシ サーバーはネットワーク レベルで動作します。
ただし、プロキシ サーバーが Web ドキュメントのコンテンツを変更するシナリオでは、この 2 つの共通点が見られます。たとえば、プロキシ サーバーは、Web ページがクライアントに到達する前に、そのページの DOM 要素を追加、削除、または変更できます。これは、スクリプトの挿入、不要な要素の削除、ローカリゼーションやカスタマイズの目的でのコンテンツの変更など、さまざまな目的で使用できます。
関連リンク
この概要では、ドキュメント オブジェクト モデル (DOM)、その起源、仕組み、特徴、今後の発展の可能性について包括的に理解できます。DOM はインタラクティブ Web 開発の基礎であり、Web テクノロジの進歩に伴って引き続き重要な役割を果たします。
