JavaScript DOM操作实例：怎么选取元素并绑定事件

在前端交互开发中，核心逻辑可以概括为两步：先在页面结构中找到目标HTML元素，再给该元素附加特定的交互响应函数。本文通过实际代码实例，讲解现代JavaScript中选取DOM元素的常用方法，以及使用 addEventListener 绑定事件的标准写法与关键细节。

一、如何选取DOM元素

DOM（文档对象模型）将网页表达为树状节点结构。在现代JavaScript中，推荐统一使用 document.querySelector 与 document.querySelectorAll，因为它们直接采用与CSS相同的选择器语法，规则统一且表达能力强。

1. 选取单个元素

document.querySelector(selector) 接收任意合法CSS选择器字符串，并返回文档中匹配该选择器的第一个元素节点；如果没有找到匹配项，则返回 null。

// 1. 通过ID选取（需要带 #）
const submitBtn = document.querySelector('#submit-btn');

// 2. 通过Class选取（需要带 .，返回匹配的第一个元素）
const firstCard = document.querySelector('.card');

// 3. 通过属性或复合选择器选取
const userEmailInput = document.querySelector('input[name="email"]');

在获取元素后，良好的习惯是检查返回值是否为 null，尤其是在动态渲染或脚本加载时机不确定的场景下。

2. 选取多个元素

当需要同时获取多个符合条件的节点（如列表项或按钮组）时，使用 document.querySelectorAll(selector)。该方法返回一个静态的 NodeList 集合。

// 选取类名为 .nav-item 的所有元素
const navItems = document.querySelectorAll('.nav-item');

// NodeList 支持 forEach 直接遍历
navItems.forEach((item, index) => {
  item.textContent = `导航项 ${index + 1}`;
});

二、使用 addEventListener 绑定事件

虽然早期JavaScript支持 element.onclick = fn 这种属性赋值绑定，但现代前端开发规范均统一使用 addEventListener。它具备支持为同一个元素绑定多个相同或不同事件处理器、支持精确控制捕获与冒泡阶段等核心优势。

1. 基础语法格式

targetElement.addEventListener(type, listener, options);

• type：事件名称字符串，例如 'click'、'input'、'keydown'、'submit' 等，注意不需要加 "on" 前缀。
• listener：事件发生时调用的回调函数。该函数在触发时会自动接收一个事件对象（通常写作 event 或 e）。
• options（可选）：配置对象或布尔值，用于设置 capture（是否捕获）、once（是否只触发一次）等。

2. 简单交互实例：按钮点击计数器

下面是一个完整的交互示例。我们在HTML中放置一个按钮和一个显示文本，使用JavaScript选取它们并为按钮绑定点击事件：

<!-- HTML 结构 -->
<button id="counter-btn">点击增加</button>
<p>当前点击次数：<span id="count-display">0</span></p>

<script>
  // 1. 选取按钮和数字展示元素
  const counterBtn = document.querySelector('#counter-btn');
  const countDisplay = document.querySelector('#count-display');

  let currentCount = 0;

  // 2. 为按钮绑定 click 事件
  counterBtn.addEventListener('click', function(event) {
    currentCount += 1;
    countDisplay.textContent = currentCount;
  });
</script>

三、事件对象与批量元素绑定（事件委托）

在实际业务中，我们经常遇到列表项非常多、或者节点需要动态增删的场景。如果用 querySelectorAll 找到所有元素并通过循环逐个绑定事件，会产生较大的内存开销，并且后续动态插入的新节点不会自动获得监听。

此时可以使用“事件委托”（Event Delegation）模式：将监听器绑定在它们共同的父容器上，利用事件冒泡机制统一处理。

事件委托完整代码实现

<ul id="item-list">
  <li data-id="1">项目一 (点击删除)</li>
  <li data-id="2">项目二 (点击删除)</li>
  <li data-id="3">项目三 (点击删除)</li>
</ul>

<script>
  const listContainer = document.querySelector('#item-list');

  // 只在父容器上绑定一次事件监听
  listContainer.addEventListener('click', function(event) {
    // 检查被点击的具体节点是否是 li
    const targetLi = event.target.closest('li');
    if (targetLi && listContainer.contains(targetLi)) {
      const itemId = targetLi.getAttribute('data-id');
      console.log(`正在删除ID为 ${itemId} 的条目`);
      targetLi.remove(); // 直接从DOM中移除该元素
    }
  });
</script>

四、关键操作注意事项

五、总结：核心步骤速查

选取元素并绑定事件的整个链条可以概括为以下四个关键环节：