DOM操作は何から始めればいい？

✅ 回答

DOM操作は「JavaScriptでHTMLの内容や見た目を動的に変える」技術です。ボタンを押したらテキストが変わる、リストに項目を追加する、などの「動き」はすべてDOM操作です。

最初に覚える3つのメソッド

メソッド	何をする？	使う場面
querySelector()	HTML要素を取得する	操作したい要素を見つける
textContent	テキストを変更する	表示内容を書き換える
addEventListener()	イベントを登録する	クリック、入力などに反応させる

基本の例：ボタンクリックでテキスト変更

// 1. 要素を取得する
const btn = document.querySelector("#my-btn");
const msg = document.querySelector("#message");

// 2. イベントを設定する（ボタンクリック時）
btn.addEventListener("click", () => {
  // 3. 内容を変更する
  msg.textContent = "ボタンが押されました！";
  msg.style.color = "green";
});

応用：要素を動的に作成する

// 要素を動的に作成して追加する
const list = document.querySelector("#todo-list");

function addTodo(text) {
  const li = document.createElement("li");
  li.textContent = text;
  list.appendChild(li);
}

addTodo("宿題をやる");
addTodo("プログラミングの練習");

ToDoリストやコメント欄など、「ユーザーの操作で要素が増える」UIはこのパターンです。

DOM操作でできること一覧

• テキストの変更（textContent）
• スタイルの変更（style.color, classList.add()）
• 要素の追加・削除（appendChild, remove()）
• 属性の変更（setAttribute, src, href）
• フォームの値取得（input.value）

学園祭サイトでの活用例

• 投票ボタン — クリックしたらカウントが増える
• タブ切り替え — クリックしたタブの内容だけ表示
• ダークモード — ボタンで背景色と文字色を切り替え

よくあるミス

• querySelector の結果が null → idやclass名のスペルミス
• scriptタグがHTMLより先に読み込まれる → scriptをbodyの最後に置く

DOM操作の実践パターン集

// テキストを変更する
document.getElementById('title').textContent = '新しいタイトル';

// HTMLを挿入する
document.getElementById('list').innerHTML += '<li>新しい項目</li>';

// クラスを追加/削除する
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('dark-mode');

// スタイルを直接変更する
element.style.backgroundColor = '#0d9488';
element.style.display = 'none';

// 要素を新しく作って追加する
const newDiv = document.createElement('div');
newDiv.textContent = '動的に追加された要素';
document.body.appendChild(newDiv);

この6パターンを覚えれば、ほとんどのDOM操作ができます。まずは getElementById + textContent から始めましょう。