WEB用語辞典-DOM（Document Object Model）

WEB用語辞典-DOM（Document Object Model）

DOM（Document Object Model：ドキュメント・オブジェクト・モデル）とは、HTMLやXMLで作成された文書を、プログラムから操作できるようにツリー構造で表現した仕組みのことです。WEBブラウザはHTMLを読み込むと、その内容をDOMとしてメモリ上に展開し、JavaScriptはこのDOMを通じてページ内の要素を取得・変更・追加・削除できます。現在のWEBサイトやWEBアプリケーションで動的な画面表示を実現するうえで欠かせない技術です。

例えば、ボタンをクリックするとメニューが開く、入力した文字数がリアルタイムで表示される、商品をカートに追加すると数量や合計金額がすぐに更新されるといった機能は、JavaScriptがDOMを操作することで実現されています。ページ全体を再読み込みすることなく必要な部分だけを書き換えられるため、利用者は快適に操作できます。

DOMでは、HTML文書を「木（ツリー）」のような構造で管理します。最上位にはHTML要素があり、その下にhead要素やbody要素、さらにその中に見出しや段落、画像、リンクなどの各要素が親子関係を持って配置されます。JavaScriptはこのツリー構造をたどりながら目的の要素を探し、内容や属性、CSSクラスなどを変更します。

例えば、見出しの文字を書き換えたり、画像を別のものへ変更したり、ボタンを押したときに新しい要素を追加したりといった処理は、すべてDOM操作によって行われます。また、HTML要素の色やサイズなどのスタイルを変更したり、要素の表示・非表示を切り替えたりすることも可能です。このような機能により、静的なページだけでなく、利用者の操作に応じて内容が変化するWEBサイトを作成できます。

ReactやVue.js、Angularなどの現代的なJavaScriptフレームワーク・ライブラリも、最終的にはDOMを操作して画面を更新しています。ただし、これらは直接DOMを操作するのではなく、「Virtual DOM（仮想DOM）」などの仕組みを利用して変更箇所だけを効率よく反映するため、表示速度やパフォーマンスを向上させています。

DOMはHTML、CSS、JavaScriptをつなぐ重要な役割を担っています。HTMLで作成されたページ構造をJavaScriptがDOM経由で操作し、CSSによって見た目を整えることで、利用者が快適に利用できるWEBサイトやWEBアプリケーションが実現されています。そのため、JavaScriptを使ったWEB制作や動的なページ開発を学ぶうえで、DOMは必ず理解しておきたい基本概念の一つといえるでしょう。