DOM: HTMLを操る

JavaScriptでWebページを動的に変更。

DOM
Document Object Model。HTMLをオブジェクトとして操作。
querySelector
CSSセレクタで要素を取得。
Fragment
仮想のコンテナ。DOM更新を1回にまとめる。

DOM操作の基礎

HTMLのリモコン

DOMはHTMLを操作するリモコン。テレビ(HTML)を直接触らずにチャンネルを変えられる。

DOM Basics
// 要素の取得
const el = document.getElementById('app');
const items = document.querySelectorAll('.item');


// 内容の変更
el.textContent = 'Hello';
el.innerHTML = '<strong>Hello</strong>';


// 属性の変更
el.setAttribute('data-id', '123');
el.classList.add('active');


// スタイルの変更
el.style.color = 'red';

安全な要素の構築

Bad
// ❌ Bad: innerHTML で構築
container.innerHTML = '<div class="card"><h2>' + title + '</h2></div>';
// XSS 脆弱性、パフォーマンス低下
Good
// ✅ Good: DOM API で構築
const card = document.createElement('div');
card.className = 'card';
const h2 = document.createElement('h2');
h2.textContent = title;  // XSS 安全
card.appendChild(h2);
container.appendChild(card);
Modern Patterns
// テンプレートリテラル + insertAdjacentHTML
el.insertAdjacentHTML('beforeend', `
    <div class="card">
        <h2>${escapeHtml(title)}</h2>
    </div>
`);


// Fragment でバッチ追加
const fragment = document.createDocumentFragment();
items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
});
ul.appendChild(fragment);  // 1回のDOM更新
Tip: ユーザー入力は必ず textContent や エスケープ関数を使う。

合格ライン

☐ querySelector で要素を取得できる
☐ textContent と innerHTML の違いを説明できる

演習課題

課題1: querySelector
querySelector で要素を取得して操作してください。
課題2: createElement
createElement で安全に要素を作成してください。