【JavaScript入門】HTMLとDOMの関係

　HTML はあくまで「文字列で書かれたマークアップ」ですが、ブラウザはそれをパースして DOM（Document Object Model）ツリー というオブジェクト構造を生成し、描画エンジンは DOM をもとに画面を描きます。
　JavaScript が触れるのは DOM ツリー上のノード であり、HTML ソースを直接書き換えているわけではありません。ここでは「HTML ⇒ DOM ⇒ 描画」という流れを押さえ、DOM の仕組みと JavaScript からの操作方法を体系的に整理します。

１．ブラウザが行う 3 段階の処理

1.1. HTML パース

1 行ずつタグを解釈し、要素ノード・テキストノード・コメントノードを生成する。

1.2.DOM ツリー構築

パース結果を 親子関係 に並べ替えツリー化。トップが document、直下に html 要素が来る。

1.3. レンダリング

　CSSOM（CSS のオブジェクトモデル）と合成し、レイアウト → ペイント → 画面表示。DOM を変更するとこのパイプラインが再実行される。

３．DOM ツリーの構造

2.1. ノードの種類と役割

ノード型	インターフェース	例
ドキュメント	`Document`	`document`
要素	`Element`	`<div>`, `<h1>`
テキスト	`Text`	ノード内の文字列
コメント	`Comment`	`<!-- memo -->`

2.2. ツリーのイメージ

Document
 └─ html
     ├─ head
     │   └─ title
     └─ body
         ├─ h1
         └─ div

各ノードは parentNode・childNodes・nextSibling などの参照を持ち、双方向にたどれる。

３．JavaScript から DOM を操作する

3.1. 代表的な取得メソッド

メソッド	用途	戻り値
`getElementById(id)`	ID で 1 要素取得	`Element`
`querySelector(sel)`	CSS セレクタで 1 要素	`Element`
`querySelectorAll(sel)`	CSS セレクタで複数	`NodeList`

3.2. 生成・挿入・削除

操作	API 例
ノード生成	`document.createElement('p')`
挿入	`parent.appendChild(node)` / `insertBefore()`
削除	`node.remove()` / `parent.removeChild(node)`

DOM を書き換えるとブラウザは再レンダリングを行い、ユーザーの見た目も即座に更新される。

４．イベントと DOM の連携

4.1. イベントリスナー

document.getElementById('btn')
        .addEventListener('click', e => {
          e.target.textContent = 'クリックされました';
        });

　DOM ノードは addEventListener でユーザー操作を検知でき、コールバック内で DOM を変更すればインタラクティブな挙動が実現する。

4.2 .フォーム操作の流れ

入力要素を取得
input / change イベントで値を監視
DOM あるいは送信処理に反映

５．パフォーマンスとベストプラクティス

5.1. 再描画コストを意識する

大量の DOM 変更はレイアウト再計算を頻発させる。

バッチ更新：変更をまとめて DocumentFragment に追加 → 一括挿入
CSS でアニメーション：軽量な GPU レイヤーを活用

5.2. モダン API の活用

classList でクラス操作
dataset でカスタムデータ属性
MutationObserver で DOM 変化を監視

まとめ

HTML はブラウザによって DOM ツリー に変換され、JavaScript は DOM を通じてページを操作する。
DOM はノードの親子ツリー。取得・生成・削除などの API を駆使して動的 UI を構築。
イベントと組み合わせることで、ユーザー操作に応じた DOM 更新 → 即時レンダリングが可能。

　DOM の概念を理解すると、JavaScript での画面操作やライブラリ（React、Vue など）の内部動作も見通し良く把握できるようになる。

【JavaScript入門】HTMLとDOMの関係