操作 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 个监听器。把单个监听器绑定到父元素上，并用 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 的第二个参数的作用是什么？
   • 它是每次事件触发时执行的函数
   • 它是开始监听前的延迟
   • 它是目标元素的 CSS 选择器
3. 在绑定到父元素的监听器中，event.target 代表什么？
   • 持有该监听器的父元素
   • 事件实际发生在其上的那个确切元素
   • 浏览器窗口