ドキュメントオブジェクトモデル（DOM）：構造、API、歴史、用途

構造とAPI

DOMは基本的に、Documentノードを根とするツリーとして文書を扱います。Elementノードはタグを表し、Textノードはテキスト内容を保持し、Attributeノードは要素のプロパティを記述します。APIで公開される代表的なメソッドとプロパティには、次のものがあります。

• querySelector／querySelectorAll、getElementById、getElementsByTagName — ノードを検索する
• createElement、createTextNode、cloneNode — ノードを作成する
• appendChild、insertBefore、removeChild、replaceChild — 構造を変更する
• addEventListener、dispatchEvent — イベントを処理する

歴史と標準

DOMは初期のブラウザAPIから発展し、標準化団体による正式な勧告へと至りました。W3Cは実装を統一するためにDOM仕様を公開し、WHATWGはHTML関連のインターフェースを継続して保守しています。仕様は、スクリプトが文書とどのようにやり取りすべきかを定義し、ブラウザ内の実装は具体的なオブジェクトと動作を提供します。詳細はDOM仕様を参照してください。

用途と例

開発者はDOMを、内容の動的更新、フォームの検証、スタイルや属性の操作、シングルページアプリケーションの作成、アクセシビリティ機能の実現といった作業に利用します。テストツール、サーバーサイドレンダラー、ブラウザ自動化フレームワークも、ページを調査・制御するためにDOM表現を使用します。

区別と注目すべき事実

DOMはHTMLファイルのソーステキストとは異なります。DOMは、ブラウザがマークアップを解析した後の実行時オブジェクトモデルです。現代のフレームワークでは、実際のDOMに変更を適用する前に効率的な更新を計算するメモリ上の抽象化として、仮想DOMを導入することがあります。DOMは変更の検出と応答に役立つライブコレクションやミューテーションオブザーバーを公開しますが、直接的なDOM操作にはコストがかかる場合があります。そのため、多くのアプリケーションはパフォーマンス向上のために更新をまとめて処理します。