JavaScriptのDOM操作とイベント

本記事では、JavaScriptで HTMLを操作する方法（DOM操作） と、 ユーザーの操作に反応する仕組み（イベント） について解説します。

「ボタンをクリックしたら処理を実行したい」「入力内容に応じて画面を変えたい」といった、Webアプリらしい動きを作るための必須知識です。

---

DOMとは？

DOM（Document Object Model）とは、HTMLをJavaScriptから操作するための仕組みです。

ブラウザはHTMLを読み込むと、要素をツリー構造として管理します。
JavaScriptはこのDOMを通して、要素の取得・変更・削除などを行います。

---

要素の取得

idで取得

const title = document.getElementById("title");

<h1 id="title">見出し</h1>

---

classで取得

const items = document.getElementsByClassName("item");

複数要素が取得される点に注意が必要です。

---

CSSセレクタで取得

const button = document.querySelector(".btn");
const listItems = document.querySelectorAll("li");

---

テキスト・HTMLの変更

テキストを変更する

title.textContent = "変更後の見出し";

HTMLを変更する

title.innerHTML = "<span>見出し</span>";

⚠️ innerHTML はXSSの原因になるため、ユーザー入力には注意が必要です。

---

スタイルの変更

title.style.color = "red";
title.style.fontSize = "24px";

複雑なスタイル変更は、classの付け替えがおすすめです。

title.classList.add("active");
title.classList.remove("active");

---

イベントとは？

イベントとは、

• クリック
• 入力
• スクロール

などのユーザー操作やブラウザの動作のことです。

JavaScriptでは、イベントが発生したタイミングで処理を実行できます。

---

クリックイベント

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  alert("クリックされました");
});

<button id="btn">クリック</button>

---

入力イベント

const input = document.querySelector("#name");

input.addEventListener("input", (e) => {
  console.log(e.target.value);
});

<input type="text" id="name">

フォーム入力チェックなどでよく使われます。

---

よくある実務例：ボタンで表示切り替え

const btn = document.querySelector("#toggle");
const box = document.querySelector("#box");

btn.addEventListener("click", () => {
  box.classList.toggle("hidden");
});

<button id="toggle">切り替え</button>
<div id="box">表示エリア</div>

---

DOM操作でよくある注意点

• JavaScriptはHTML読み込み後に実行する
• querySelectorAll は配列ではなくNodeList
• イベントの多重登録に注意

document.addEventListener("DOMContentLoaded", () => {
  // DOM操作はここに書く
});

---

まとめ

• DOMはHTMLをJavaScriptから操作する仕組み
• 要素取得は querySelector が便利
• イベント処理でユーザー操作に反応できる

この内容を理解すると、 フォーム制御・モーダル表示・動的UIなどが実装できるようになります。

---