DOMを操作する: querySelector、イベントリスナー

ページ上の要素を選択し、クリックに反応し、パフォーマンスの高いコードのためにイベント委譲を取り入れます。

9 分 · 3 問

DOMはあなたのHTMLページの生きた表現です。それを操作することが、JavaScriptがインターフェースをインタラクティブにする方法です。欠かせないコンビ: 要素を選択し、次にそれに起きることをリッスンします。まずは小さな初期構造から始めましょう。

<button id="save-btn" class="btn">Save</button>
<ul class="task-list">
  <li>Buy groceries</li>
  <li>Call the client</li>
</ul>

querySelector は任意のCSSセレクタ(#id、.class、ul li、[data-id])を受け取り、最初に一致した要素を返します。一致しなければ null を返します。querySelectorAll は一致するすべての要素を NodeList で返し、forEach で反復処理できます。

const button = document.querySelector("#save-btn");
const firstTask = document.querySelector(".task-list li");
const tasks = document.querySelectorAll(".task-list li");

console.log(tasks.length); // 2
console.log(firstTask.textContent); // "Buy groceries"

ユーザーの操作に反応するには、addEventListener がイベントの種類に関数を結びつけます。click、input、submit、keydown... 関数は何が起きたかを記述する event オブジェクトを受け取ります。そして textContent で内容を、classList でスタイルを変更できます。

const button = document.querySelector("#save-btn");

button.addEventListener("click", () => {
  button.textContent = "Saved!";
  button.classList.add("success");
});

プロの良い習慣: 200項目のリストに200個のリスナーはふさわしくありません。親に1つのリスナーを付け、クリックされた要素を event.target で特定します。これがイベント委譲です。あとから追加された要素に対しても機能します。

const list = document.querySelector(".task-list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (item) {
    item.classList.toggle("done");
  }
});

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. 複数の要素が btn クラスを持つ場合、document.querySelector(".btn") は何を返しますか?
   • 一致するすべての要素
   • 最初に一致した要素だけ
   • セレクタが曖昧なのでエラー
2. addEventListener の第2引数の役割は何ですか?
   • イベントが発火するたびに実行される関数です
   • リッスンが始まるまでの遅延です
   • 対象要素のCSSセレクタです
3. 親に付けられたリスナーの中で、event.target は何を表しますか?
   • リスナーを持つ親
   • イベントが実際に起きた要素そのもの
   • ブラウザのウィンドウ