DOM

一言で言うと

Webページの構造をプログラムから操作するための仕組み。HTMLをツリー状のデータとして扱い、動的に変更できる。

もう少し詳しく

DOMは「Document Object Model」の略で、HTMLの内容をプログラムから読み取ったり変更したりするための「窓口」です。

家の例えを続けると、DOMは「家の設計図を手元に持っていて、リアルタイムで模様替えできるリモコン」のようなものです。ボタンを押すと壁の色が変わったり、家具が追加されたり、部屋が増えたりします。

Webページを開くと、ブラウザはHTMLを読み込んでDOMツリー（家系図のような構造）を作ります。JavaScriptはこのDOMツリーを操作して、ページの内容を動的に変更します。たとえば「いいね」ボタンを押すと数字が増えるのは、JavaScriptがDOMを操作して数字の表示を書き換えているからです。

実務でどう使うか

コードで見てみよう

// DOMからHTML要素を取得する
const title = document.querySelector("h1");
console.log(title.textContent);  // → 見出しのテキストを表示
// DOMを変更する（ページの内容が変わる）
title.textContent = "新しいタイトル";
title.style.color = "red";
// 新しい要素を追加する
const newParagraph = document.createElement("p");
newParagraph.textContent = "動的に追加された段落です";
document.body.appendChild(newParagraph);