DOMとは、ドキュメントオブジェクトモデル（Document Object Model）の略で、ウェブページのHTMLやXMLなどの文書をツリー構造のオブジェクトモデルとして表現し、JavaScriptなどのプログラムから文書の構造、スタイル、コンテンツを操作できるようにする仕組みです。DOMを理解することで、ウェブページの内容や見た目を動的に変更し、ユーザーの操作に応じたインタラクティブなWebアプリケーションを作成することが可能になります。
DOMの主な役割
- ドキュメントのツリー構造表現:HTML文書を階層的な「ツリー」構造で表現します。各要素やコンテンツがノード（ノード）として扱われます。
- プログラムによる操作:各ノードはオブジェクトとして扱われ、JavaScriptなどのプログラミング言語からアクセス・操作できます。
- Webページの動的な変更:DOMツリーを変更することで、Webページに表示される内容をリアルタイムに更新したり、要素を追加・削除したりすることができます。
- イベント処理:イベントハンドラーをノードに割り当てることで、ユーザーのクリックなどのイベントにプログラムが反応し、動的な処理を実行できます。
DOMの仕組み
- 1. HTMLの解析とDOMツリーの生成:ブラウザは受け取ったHTMLファイルを解析し、その構造を元に内存上（メモリ上）にDOMツリーと呼ばれるツリー構造のデータモデルを作成します。
- 2. プログラムからのアクセス:Webページに埋め込まれたJavaScriptコードは、作成されたDOMツリーにアクセスします。
- 3. 変更の反映:JavaScriptがDOMツリーに変更を加えると、それがブラウザのウィンドウに表示されるWebページの内容に反映されます。
HTMLとの違い
- HTMLは、ウェブページの「コンテンツ（内容）」自体を示すマークアップ言語です。
- DOMは、そのHTMLをブラウザが解釈し、プログラムが操作できる状態にした「オブジェクトのツリー構造」です。
簡単に言えば、HTMLが完成した「設計図」だとしたら、DOMはプログラムがその設計図を「読み解き、書き換えるためのインターフェース」と言えます。
コメント