DOM（Document Object Model）は、ウェブページの構造を表す階層モデルで、HTMLやXMLドキュメントをプログラム的に操作できるようにした仕組みです。DOMを使うことで、JavaScriptなどのプログラムがウェブページの内容やレイアウトを変更することができます。ここでは、DOMの基本的な仕組みとその活用方法について解説します。
DOMの基本構造
DOMは、ツリー構造として表現されます。ウェブページ全体が「ドキュメントツリー」として扱われ、各要素（タグ、テキスト、属性など）は「ノード」として表現されます。このツリー構造は以下のように階層化されています。
- ルートノード：ページ全体を表す <html> 要素がルートノードとなります。
- 親ノードと子ノード：各ノードには親子関係があり、たとえば <body> は <html> の子ノードとなり、さらにその下に <div> や <p> などの子ノードが配置されます。
- 兄弟ノード：同じ親ノードを持つ要素同士は兄弟ノードになります。
DOMツリーの一例
この例では、<html> がルートノードであり、<body> はその子ノードです。また、<h1> と <p> は共に <body> の子ノードであり、兄弟関係にあります。
DOMの役割と利用例
DOMの主な役割は、ウェブページの内容を動的に操作できることです。例えば、JavaScriptを使ってDOMにアクセスすることで、ページの一部をリアルタイムで更新したり、ユーザーの操作に応じてインタラクションを追加することができます。
JavaScriptによるDOM操作の例
このコードでは、<h1> タグの内容を変更し、新しい段落を追加しています。DOM操作は、ユーザーがボタンをクリックしたり、スクロールした際にリアルタイムで行われるため、動的なウェブページの構築に欠かせない技術です。
DOMとイベントハンドリング
DOMを活用するもう一つの重要な技術がイベントハンドリングです。ユーザーのアクション（クリック、キー入力、ホバーなど）に応じて、特定の処理を実行するための仕組みです。
例：クリックイベントのハンドリング
このように、DOMとJavaScriptを組み合わせることで、ユーザーがボタンをクリックしたときにポップアップを表示するなどの処理を簡単に実装できます。
DOMの進化と最新技術
従来、DOM操作はブラウザごとの仕様が微妙に異なっており、クロスブラウザ対応が難しい課題でした。しかし、HTML5 や ES6 以降、標準化が進んだことで、一貫したDOM操作が可能になりました。さらに、ReactやVue.jsといったフロントエンドフレームワークの登場により、DOM操作はさらに効率的になり、仮想DOM（Virtual DOM）を利用してパフォーマンスを向上させる技術も普及しています。
DOMのまとめ
DOMは、ウェブページの構造を階層的に捉え、プログラム的に操作できるようにする技術です。JavaScriptと組み合わせることで、ユーザーのアクションに応じた動的なページを作成することが可能です。また、近年の技術の進歩により、さらに効率的なDOM操作が実現されています。
ウェブ開発者にとって、DOMの理解は必須です。JavaScriptやフレームワークを活用することで、インタラクティブなユーザー体験を提供するための基本スキルとなります。