C
JavaScript 一覧
前へ13 / 21次へ
JavaScript/DOM/Lesson 13

DOM — *HTML を JS で操作する*

30分·theory
このチャプター
1/2

DOM — *HTML を JS で操作する*

🎯 このレッスンを読んだら

このレッスンを読み終えると、以下の3つを自信を持ってできるようになります。

  • ▸✅ var · let · const の違い + hoisting の挙動
  • ▸✅ 7つの型 + typeof の落とし穴 (typeof null === 'object')
  • ▸✅ スクリプト読み込み (defer · async · module) の違い

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらレッスンを閉じてください。

DOM とは何か

核心の一文

DOM (Document Object Model) = ブラウザが HTML を JavaScript オブジェクトのツリー として表現したもの。このツリーを 操作 してページを動的に変更します。

ツリー構造

code
document
└── html
    ├── head
    │   ├── title
    │   └── meta
    └── body
        ├── h1
        ├── div
        │   ├── p
        │   └── button
        └── footer

各タグが ノード (Node)。JS からこれらのノードを 選択・変更・追加・削除 できます。

要素の選択

javascript
// 1️⃣ ID で — 最速、常に1つ (存在しない場合は null)
const el = document.getElementById('main');
//                  ↑ # は不要！ 'main' だけ

// 2️⃣ CSS セレクタで — 最初のマッチ1つ (存在しない場合は null)
const btn = document.querySelector('.btn-primary');
//                    ↑ # / . を含む CSS セレクタをそのまま使用可

// 3️⃣ CSS セレクタで — マッチする「すべて」を返す
const items = document.querySelectorAll('.item');
// → NodeList (配列に似ているが本物の配列ではない)
//   → items.forEach は OK、items.map は ❌ → [...items].map で変換

querySelector が 最も柔軟 — CSS セレクタをそのまま使えます。

内容の変更

javascript
const el = document.querySelector('#title');

// テキスト
el.textContent = "新しいタイトル";

// HTML
el.innerHTML = "<strong>強調</strong>されたタイトル";

// 属性
el.setAttribute('data-id', '42');
el.id = "new-id";

// クラス
el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');

// スタイル (インライン)
el.style.color = "red";
el.style.fontSize = "20px";

⚠️ innerHTML の落とし穴 — ユーザー入力をそのまま入れると XSS 攻撃 のリスクがあります:

javascript
el.innerHTML = userInput;        // ❌ XSS リスク
el.textContent = userInput;       // ✅ 安全

要素の追加・削除

javascript
// 作成
const newDiv = document.createElement('div');
newDiv.textContent = "こんにちは";
newDiv.classList.add('greeting');

// 追加
parent.appendChild(newDiv);              // 末尾
parent.insertBefore(newDiv, existing);   // 特定の位置
parent.prepend(newDiv);                   // 先頭

// 削除
el.remove();                              // 自身を削除
parent.removeChild(child);                // 子要素を削除

イベント処理

javascript
const btn = document.querySelector('#submit');

btn.addEventListener('click', (event) => {
    event.preventDefault();   // デフォルト動作の防止 (フォーム送信など)
    console.log("クリックされました！");
});

// イベントオブジェクト
btn.addEventListener('click', (e) => {
    console.log(e.target);       // クリックされた要素
    console.log(e.clientX, e.clientY);   // マウス位置
});

フォーム処理

javascript
const form = document.querySelector('#login-form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(form);
    const email = formData.get('email');
    const password = formData.get('password');

    const res = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' }
    });
});

モダン開発 — DOM の直接操作は稀

React・Vue・Svelte などのフレームワークが DOM 操作を抽象化 します。開発者は 状態 (state) を変えるだけで、フレームワークが DOM を自動的に 更新します。

それでも DOM API を 知っておくべき 理由:

  • ▸ライブラリの作成・シンプルなページ
  • ▸デバッグ (ブラウザの開発者ツール)
  • ▸フレームワーク内部の理解

まとめ

  • ▸DOM = HTML の JS オブジェクト表現
  • ▸querySelector で要素を選択
  • ▸textContent・classList・addEventListener で操作
  • ▸モダン開発では React などが抽象化 するが、基礎知識は必須

⚡ 実際に試してみよう — DOM API (mock document)

ブラウザのサンドボックス制約により、実際の document の代わりに *mock オブジェクト* を使って DOM 操作の流れを実演します。`querySelector`・`textContent`・`classList` がどのように動作するかをコンソール出力で確認できます。
✏️ JS 코드
📟 コンソール出力
▶ 実行ボタンを押してください
⚠️ ブラウザのサンドボックスで実行 — console.log()のみ対応、alert/fetchは不可

🤖 AI にこう聞いてみよう

このレッスンの概念を理解すれば、AI に 具体的に 指示できます。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

  • ▸「この querySelector のループを NodeList で受け取って forEach でまとめてください」
  • ▸「このイベントハンドラをイベント委任 (event delegation) に書き換えてください」
  • ▸「このコードのメモリリーク (イベントリスナーの解放) の可能性を確認してください」

なぜトークンを減らせるのか

概念を知らないと、AI の回答を受け取っても 「それは何ですか？」 と再度聞かなければなりません。その「再質問」がトークンを消費します。概念を一度身につければ、会話が一度で 完結します。

先に読むとよい概念: 配列の高階関数
次のおすすめ: イベント処理
前へ一覧次へ
DOMとは？ - JavaScript