DOM とは何か
DOM (Document Object Model) は、HTML や CSS で書かれた Web ページを JavaScript から操作するための仕組みです。Web ページに動きを与えるためには、この DOM の理解が欠かせません。
DOM の役割
HTML と CSS は静的な構造とデザインを定義しますが、これらを動的に操作するには JavaScript が必要です。しかし、JavaScript は直接 HTML を操作するのではなく、DOM オブジェクトを介して操作を行います。
つまり、DOM は HTML/CSS と JavaScript の橋渡しをする存在ですね。
DOM の仕組み
ドキュメントオブジェクト
ブラウザは HTML を読み込むと、その内容を元に JavaScript のオブジェクトを自動的に生成します。この時、ドキュメントオブジェクト (document) が DOM の世界へのエントリーポイント（入口）となります。
エントリーポイントとは、プログラムが処理を開始する最初の地点のことです。DOM では、document オブジェクトから全ての要素にアクセスできます。
HTML から DOM オブジェクトへの変換
HTML の各要素は、対応する JavaScript のオブジェクトに変換されます。このプロセスを図で見てみましょう。
DOM を操作する流れ
実際に DOM を操作する際の基本的な流れは以下の通りです。
具体例
たとえば、以下のような HTML があるとします。
<div id="content">Hello</div>
この要素を JavaScript で操作する場合、次のようになります。
// document から要素を取得
const element = document.querySelector('#content');
// DOM オブジェクトのプロパティを変更
element.textContent = 'Hello, World!';
この時、element という変数には HTML の <div> 要素に対応する JavaScript のオブジェクトが格納されています。このオブジェクトを操作することで、実際の HTML 要素に変更が反映され、画面が更新されます。
まとめ
- DOM は HTML/CSS と JavaScript の橋渡しをする仕組み
- HTML の各要素は JavaScript のオブジェクトとして扱われる
-
documentオブジェクトが DOM 操作のエントリーポイント - DOM オブジェクトを操作することで、Web ページに動きを与えることができる
DOM の基本を理解することで、より柔軟で動的な Web ページを作成できるようになります。