🧩

JavaScriptのDOMとは何か？初心者向けに構造から整理する

に公開
JavaScript
frontend
DOM
tech

JavaScriptにおけるDOMの考え方を整理する

〜対象取得・処理定義・実行タイミングという視点〜

JavaScriptを学び始めたとき、
「DOMとは何か」「なぜgetElementByIdが必要なのか」でつまずく人は多い。

この記事では、JavaScriptの基本的な流れを
DOMという概念を軸に整理して説明する。

DOMとは何か？

DOM（Document Object Model）とは、
ブラウザがHTMLを解析（パース）して作るオブジェクト構造である。

重要なのは、DOMは画面そのものではないという点だ。

HTML → DOM → 画面 の流れ

1. HTML（ただの文字列）

<button>Click</button>

HTMLは最初、ただのテキストにすぎない。
JavaScriptはこのままでは直接操作できない。

2. ブラウザがHTMLをパースする

ブラウザはHTMLを読み取り、

  • これはbuttonタグ
  • 中身はテキスト
  • bodyの中にある

というように構造を理解する。

3. DOMを生成する（ここが核心）

その結果、ブラウザ内部では次のようなオブジェクト構造が作られる。

Document
 └─ html
    └─ body
       └─ button

これが DOMツリー であり、
JavaScriptが操作できる対象である。

4. DOM + CSS → 画面描画

DOMとCSSを元に、
最終的にユーザーが見る画面が描画される。

重要な整理

項目 役割
HTML 設計図
DOM JavaScriptが操作できるオブジェクト
画面 描画された結果

JavaScriptは画面を直接操作しない。DOMを操作する。

JavaScriptの基本思考フロー

JavaScriptの処理は、次の3ステップで考えると理解しやすい。

① DOMを取得する（誰を操作するか）

const button = document.getElementById("target");
  • 要素そのものを取得する
  • 値ではなく操作対象の参照
const value = button.value;
  • valueやinnerTextは必要なときに読む

② イベント処理関数を定義する（何をするか）

function handleClick() {
  console.log("clicked");
}
  • この時点では実行されない
  • 設計だけを書いている状態

③ イベントを紐づける（いつ実行するか）

button.addEventListener("click", handleClick);
  • クリックされたら関数を実行するという予約

注意点：

handleClick   // 正しい
handleClick() // 即時実行

DOMは画面ではない

button.innerText = "Pressed";

JavaScriptはDOMオブジェクトの状態を変更しているだけで、
画面更新はブラウザが自動で行う。

まとめ

JavaScriptはDOMを操作し、
ブラウザがその結果を画面に反映する。

この考え方は、ReactやVueでも変わらない。

Discussion