DOM

Document Object Model

web programming beginner

ブラウザがHTMLを読み込んだとき、ページの構造をプログラムから操作できるようにするためのデータ構造のこと。

概要（サマリー）

DOMとは、ブラウザがHTMLを読み込んだとき、ページの構造をプログラムから操作できるようにするためのデータ構造のことである。

正式名称は「Document Object Model（ドキュメント・オブジェクト・モデル）」。ブラウザはHTMLファイルを受け取ると、その内容を「木構造（ツリー）」のデータに変換する。このデータ構造がDOMであり、JavaScriptからDOMを通じてページ上の要素を取得・追加・変更・削除することができる。

たとえば「ボタンをクリックしたら見出しのテキストを変える」「データを取得してリストを動的に追加する」といった操作は、すべてJavaScriptがDOMを操作することで実現される。

詳細解説

HTMLとDOMの違い

HTMLはテキストファイルであり、ブラウザに届いた段階では「文字列」にすぎない。ブラウザがそれを解析してDOMツリーを作ることで、はじめてJavaScriptから各要素にアクセスできるようになる。

HTML文字列
   ↓ ブラウザが解析
DOMツリー
   ↓ JavaScriptで操作可能になる

そのため「HTMLを書き換えた」とよく言うが、厳密にはJavaScriptはHTMLファイル本体を書き換えているのではなく、メモリ上のDOMを操作している。

DOMツリーの考え方

DOMは、ページの要素を親子関係で表したツリー構造である。html の中に body があり、body の中に h1 や button がある、というように、HTMLの入れ子構造がそのまま木のような形で扱われる。

<body>
  <h1>タイトル</h1>
  <button>送信</button>
</body>

この例では、body が親で、h1 と button が子要素になる。JavaScriptはこのツリーの中から特定の要素を探し、テキストや属性、スタイルなどを変更できる。

JavaScriptでのDOM操作例

const el = document.querySelector('h1');
el.textContent = '新しいタイトル';

document.querySelector() でDOM上の要素を取得し、textContent でテキストを書き換えている。AIにJavaScriptのコードを生成してもらうと、こうしたDOM操作のコードが頻繁に登場する。

DOMとイベント

ボタンをクリックしたときに表示を変える処理では、DOMとイベントリスナーが一緒に使われる。イベントリスナーで「クリックされた」という出来事を受け取り、その結果としてDOMを書き換える。

const button = document.querySelector('button');
const message = document.querySelector('.message');

button.addEventListener('click', () => {
  message.textContent = 'クリックされました';
});

このコードでは、ボタンがクリックされたときに .message のテキストを変更している。Webページの動きの多くは、このようにイベントとDOM操作の組み合わせで作られる。

DOMとレンダリング

JavaScriptがDOMを変更すると、ブラウザは画面の表示を更新（再レンダリング）する。つまり、DOMの変更は画面の変化につながる。

ただし、DOMを頻繁に変更しすぎるとパフォーマンスに影響することがある。ReactやVueなどのフレームワークは、変更を効率よく反映するために「仮想DOM」のような仕組みを使うことがある。

AIコーディングとDOMの関係

AIにWebページのコードを作ってもらうと、document.querySelector()、addEventListener()、textContent、classList などのDOM操作がよく出てくる。これらは「どの要素を選び、どんな変更をするか」を指定するコードである。

AI生成コードが動かないときは、取得しようとしている要素が本当にHTML内にあるか、クラス名やID名が一致しているか、JavaScriptがDOM作成後に実行されているかを確認するとよい。開発者ツールのElementsパネルとConsoleパネルを使うと、DOMの状態とエラーを調べやすい。

よくある勘違い

DOMはHTMLファイルそのもの？

DOMはHTMLファイルをブラウザが読み込んで作成したメモリ上のデータ構造であり、HTMLファイル自体ではない。JavaScriptでDOMを変更しても、サーバー上のHTMLファイルが書き換わるわけではない。ページを再読み込みすると変更は消える。

DOM操作はファイルに保存される？

JavaScriptでDOMを変更しても、その変更は表示中のページにだけ反映される。元のHTMLファイルやサーバー上のデータが自動で保存されるわけではない。保存したい場合は、API通信やフォーム送信など別の仕組みが必要になる。

DOMと画面表示は同じもの？

DOMは画面そのものではなく、画面を作るための構造データである。ブラウザはDOMやCSSをもとに表示を作る。DOMが変わると表示も変わることが多いが、DOMと画面の見た目は完全に同じ意味ではない。

DOM操作すれば何でも速くなる？

DOM操作は便利だが、頻繁に大量の要素を書き換えると表示が重くなることがある。リストを何百件も追加する、ループのたびに画面を書き換える、といった処理では、回数を減らす工夫が必要になる。

より詳しくAIに聞いてみよう

JavaScriptでDOMを操作するコードの基本的なパターンを教えてください。
DOMツリーとはどんな構造か、HTMLの例を使って説明してください。
仮想DOMとはどんな仕組みで、なぜ使われるのですか？
DOMとHTMLファイルの違いを初心者向けに整理してください。
AIが生成したDOM操作コードが動かないとき、どこを確認すればよいですか？