DOM（ドキュメントオブジェクトモデル）

HTML と DOM は別物

ここが最初のつまずきどころです。.html ファイルに書いたタグは、ただの テキスト。ブラウザがそれを読み込み、解析（パース）して、メモリ上にオブジェクトの木を組み立てたものが DOM です。

• HTML: ディスク上・ネットワーク上の静的な文字列（ソース）
• DOM: ブラウザが組み立てた、JavaScript から触れる生きたツリー

だから JavaScript で要素を足したり消したりしても、元の .html ファイルは書き換わりません。変わるのはブラウザが持っている DOM であり、画面はその DOM を映したものです。開発者ツールの「Elements」タブで見えているのは HTML ソースではなく、現在の DOM の状態です。

<!-- これは HTML（ただのテキスト） -->
<ul id="list">
  <li>りんご</li>
  <li>みかん</li>
</ul>

このソースは、ブラウザの中でおおよそ次のツリーになります。

document
└─ html
   └─ body
      └─ ul#list
         ├─ li ─ "りんご"（テキストノード）
         └─ li ─ "みかん"（テキストノード）

ノードと要素

DOM の木を構成する一つ一つが ノード（Node） です。すべてのノードが「タグ」とは限りません。

JavaScript からの操作

DOM API の使い方は、大きく 取得 → 生成 → 変更 → イベント の流れで覚えると整理できます。

取得（探す）

// id で 1 つ取る（最速・最も明示的）
const list = document.getElementById('list');

// CSS セレクタで取る（柔軟。最初の 1 つ / 全部）
const first = document.querySelector('#list li');
const items = document.querySelectorAll('#list li'); // NodeList（複数）

生成・変更（作る・書き換える）

const li = document.createElement('li'); // 新しい要素を作る
li.textContent = 'ばなな';               // 中身のテキストを設定
li.classList.add('fruit');               // クラスを付与
list.appendChild(li);                    // ツリーにぶら下げる → 画面に反映

イベント（反応する）

// クリックされたら反応する
const btn = document.querySelector('#add');
btn.addEventListener('click', (event) => {
  const li = document.createElement('li');
  li.textContent = '追加された項目';
  list.appendChild(li);
});

イベントは、クリックされた要素から 親へ向かって伝わっていく（バブリング） のが基本です。これを使うと、子要素一つ一つにリスナーを付けなくても、親で一括して受け取る「イベント委譲」が書けます。

// li が何個増えても、親の ul で一括処理できる
list.addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    event.target.classList.toggle('done');
  }
});

リフローとリペイント

DOM や CSS を変更すると、ブラウザは画面を作り直します。ここに性能の落とし穴があります。

const frag = document.createDocumentFragment();
for (const name of ['ぶどう', 'もも', 'なし']) {
  const li = document.createElement('li');
  li.textContent = name;
  frag.appendChild(li); // ここではまだ画面に触れない
}
list.appendChild(frag); // 反映は 1 回だけ

仮想 DOM との違い

React などで聞く 仮想 DOM（Virtual DOM） は、新しい技術ではなく実 DOM を効率よく更新するための仕組みです。

• まず UI の状態を JavaScript のオブジェクト（軽いコピー） として持つ
• 変更前後のコピーを比べて、差分（変わった所だけ） を計算する（差分検出 / diff）
• その差分だけを実 DOM に反映する

まとめ

• DOM は HTML を木構造のオブジェクトにしたもの。HTML テキストそのものではなく、ブラウザがメモリ上に組み立てた生きたモデル。
• JavaScript は DOM API で 取得・生成・変更・イベントを行う。textContent と innerHTML の使い分け、イベントのバブリングがポイント。
• DOM をいじると リフロー/リペイントが走る。まとめて操作し、transform / opacity を活かすと軽い。
• 仮想 DOM は実 DOM 更新を減らすための差分計算の仕組みで、最後に描くのは常に実 DOM。

土台となる文書の正体は HTML、それを動かす言語は JavaScript、見た目は CSS が担います。