怎么用原生JavaScript操作DOM：基础选择器与事件绑定指南

操作 DOM（文档对象模型）是原生 JavaScript 实现网页交互的核心技能。简单来说，在浏览器环境中，所有网页交互都可以拆解为两步：先通过选择器在页面文档树中准确找到目标元素节点，再通过事件监听机制赋予该节点响应用户行为（如点击、输入、滚动）的能力。掌握现代标准的原生 API，不仅可以摆脱对庞大第三方库的依赖，还能更深刻地理解浏览器底层的渲染与事件机制，编写出执行效率高、维护成本低的清晰代码。

一、认识 DOM 与原生操作的核心流向

当浏览器接收并解析 HTML 文本时，会将其转换为层级分明的节点树结构，每个标签、属性乃至文字片段都被映射为一个可操作的 JavaScript 对象。原生脚本介入页面的标准流程，正是沿着“页面解析完成 → 获取节点对象 → 绑定事件回调 → 响应用户操作并修改状态”这条清晰主线展开的。

二、基础选择器：精准定位页面元素

要在网页中操作内容，第一步是获取到目标元素的引用。在过去，开发者经常接触到 getElementById、getElementsByClassName 等专门方法；而在现代标准中，querySelector 与 querySelectorAll 已经成为使用最普遍的通用选择器。

1. 常用选择器语法与规范

• document.getElementById(id)：通过元素的 ID 属性精确检索。因为规范中 ID 应当在文档中保持全局唯一，该方法直接返回单个 DOM 元素，若未找到则返回 null。性能极其极高，参数只需传入纯 ID 字符串（不需要加 # 号）。
• document.querySelector(cssSelector)：接受合法的 CSS 选择器字符串，返回文档中匹配该选择器的第一个元素。若无匹配项返回 null。它非常灵活，支持类选择器（如 .btn-primary）、属性选择器（如 input[type="text"]）以及复合层级选择器（如 nav > ul > li.active）。
• document.querySelectorAll(cssSelector)：与 querySelector 语法一致，但它会匹配文档中符合条件的所有元素，返回一个包含所有匹配项的 NodeList（节点列表集合）。如果未匹配到任何内容，它会返回一个长度为 0 的空 NodeList，而不是 null。

// 1. 通过 ID 精准获取单个元素
const submitBtn = document.getElementById('submit-btn');

// 2. 通过 CSS 选择器获取第一个匹配项
const activeItem = document.querySelector('.menu-list > .item.active');
const emailInput = document.querySelector('input[name="user_email"]');

// 3. 获取所有匹配的元素列表
const allCheckboxes = document.querySelectorAll('.todo-list input[type="checkbox"]');

// NodeList 支持直接使用 forEach 遍历
allCheckboxes.forEach((checkbox, index) => {
  console.log(`第 ${index + 1} 个复选框状态:`, checkbox.checked);
});

2. 深度对比：querySelector 静态集合 与 getElementsByClassName 动态集合

很多初学者容易混淆 querySelectorAll 返回的 NodeList 与 getElementsByClassName 返回的 HTMLCollection。理解它们的关键差异对避免诡异的循环 bug 至关重要：

• 静态集合（Static Snapshot）：querySelectorAll 返回的是调用该方法瞬间的文档静态快照。即便随后通过 JavaScript 新增或删除了符合条件的 DOM 节点，这个已有的 NodeList 长度与内容都不会自动更新。
• 动态集合（Live Collection）：getElementsByClassName 或 getElementsByTagName 返回的是动态实时集合。只要文档树发生增删改，该集合的属性和长度会实时变动。若在 for 循环中一边遍历动态集合一边向 DOM 追加新节点，极易导致无限循环甚至浏览器卡死。

三、事件绑定：让页面产生实际响应

获取到 DOM 节点后，需要给它注入生命力。现代原生开发中，推荐且标准的方式是调用 EventTarget.addEventListener()。

1. 为什么弃用内联与 onclick 属性？

早期前端常使用 HTML 内联属性（如 <button onclick="doAction()">）或者脚本赋值（btn.onclick = handler）。这种做法有两大明显缺陷：

• 唯一覆盖性：直接给 onclick 属性赋值，后绑定的函数会彻底覆盖前面的绑定，无法实现多模块协作监听同一事件。
• 职责混杂：内联属性让结构与脚本强耦合，破坏代码模块化规范。

而 addEventListener 允许为同一元素的同一种事件类型附加任意多个互不干扰的回调函数，同时提供了对事件传播阶段（捕获或冒泡）以及执行选项（如 { once: true }）的精确控制。

2. addEventListener 标准语法与事件对象（Event）

语法定义为：target.addEventListener(type, listener [, options])。当事件触发时，浏览器会自动将一个封装了事件详情的 Event 对象 作为第一个参数传入回调函数：

const actionBtn = document.querySelector('#action-btn');

// 规范事件监听写法
actionBtn.addEventListener('click', function(event) {
  // event.target: 实际被点击的源目标元素
  // event.currentTarget: 当前正在处理该事件的元素（即 actionBtn）
  console.log('触发点击的目标标签:', event.target.tagName);
  
  // 阻止默认行为（例如阻止链接跳转或表单提交刷新）
  // event.preventDefault();
});

// 支持配置 options，如让事件仅触发一次后自动注销
actionBtn.addEventListener('click', () => {
  console.log('该日志只会在首次点击时输出一次');
}, { once: true });

四、进阶核心：事件流机制与事件委托

当用户在页面上点击一个深层嵌套的按钮时，浏览器并不是仅将事件直接送达该按钮。整个过程伴随着一个完整的“事件传播流（Event Flow）”。

1. 事件传播的三大阶段

1. 捕获阶段（Capture Phase）：事件从顶层 window 开始，依次向下穿越 document、<html>、<body>，一直传递到目标元素的直接父级。
2. 目标阶段（Target Phase）：事件抵达实际被点击的目标元素本身。
3. 冒泡阶段（Bubble Phase）：事件从目标元素开始逐层向上传递，逆向经过父节点，最终回到顶层 window。

原生 addEventListener 默认在冒泡阶段响应事件（第三个参数默认为 false）。利用冒泡机制，我们可以实现高效的前端设计模式——事件委托（Event Delegation）。

2. 为什么要使用事件委托？（两种做法的关键差异）

假设我们有一个包含 500 个子项的动态列表，需要让每个子项被点击时执行操作。对比两种不同的开发模式：

• 做法 A（分散绑定）：使用 querySelectorAll('li') 循环为 500 个 <li> 分别执行 addEventListener。这不仅在内存中创建了 500 个函数引用造成开销，更致命的是，后续如果通过 JavaScript 动态追加第 501 个 <li>，新元素将无法响应点击，必须重新对新元素补绑监听。
• 做法 B（事件委托）：只在共同的父节点 <ul> 上注册一次监听器。当任意子元素被点击时，事件会自动冒泡到父节点。在父级回调中通过 event.target.closest('li') 获取被触发的行元素。无论未来列表动态新增还是删除多少项，所有子元素始终能被正确响应，代码极度轻量且无需后续维护。

// 事件委托优雅实现：动态列表交互
const todoList = document.querySelector('#todo-list');

todoList.addEventListener('click', function(event) {
  // 使用 Element.closest 匹配包含自身或祖先的选择器，防止点击到 li 内部的 span 或图标
  const deleteBtn = event.target.closest('.delete-btn');
  if (deleteBtn) {
    const item = deleteBtn.closest('li');
    if (item) {
      item.remove(); // 移除当前行 DOM
      console.log('删除项成功');
    }
    return;
  }

  const item = event.target.closest('li');
  if (item) {
    item.classList.toggle('completed'); // 切换完成样式状态
  }
});

五、规范与避坑指南

在日常开发中，许多 DOM 操作或事件监听问题往往源于脚本执行时机或函数引用管理不当。遵循以下关键准则能够有效避免常见错误：

1. 脚本执行时机与 DOM 就绪保障

如果在页面解析完成之前（例如把未经任何处理的 <script> 放在 <head> 标签内），选择器尝试查找尚未渲染出来的元素，querySelector 会直接返回 null，紧接着调用 addEventListener 就会抛出经典错误：TypeError: Cannot read properties of null (reading 'addEventListener')。

解决策略有两种：

• 将 <script> 标签放置在 </body> 结束标签的前一行。
• 或者外层引入 DOMContentLoaded 事件监听，确保 DOM 树构建完毕后再执行查询：

document.addEventListener('DOMContentLoaded', () => {
  // 确保此时页面 DOM 树已经解析完成，节点对象安全可用
  const app = document.querySelector('#app');
  app.classList.add('initialized');
});

2. 正确使用 removeEventListener 释放内存

许多开发者在不需要监听时调用 element.removeEventListener('click', function() { ... })，却发现监听器根本没有被注销。原因在于：两个字面量完全相同的匿名函数在内存中是两个独立的函数对象指针。只有传入同一个具名函数的引用，removeEventListener 才能成功注销事件。

六、完整实战：轻量交互待办清单

为了将前面的基础选择器定位、事件监听、输入回车捕获及父级事件委托串联起来，下面给出一个完整的、开箱即用的原生交互示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>原生JS待办清单示例</title>
  <style>
    .todo-app { max-width: 400px; margin: 20px auto; font-family: sans-serif; }
    .todo-input-bar { display: flex; gap: 8px; margin-bottom: 16px; }
    .todo-input-bar input { flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; }
    .todo-input-bar button { padding: 8px 16px; background: #687D8D; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
    ul.todo-list { list-style: none; padding: 0; }
    ul.todo-list li { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #eee; }
    ul.todo-list li.done span { text-decoration: line-through; color: #999; }
    .del-btn { color: #d9534f; cursor: pointer; border: none; background: none; }
  </style>
</head>
<body>

  <div class="todo-app">
    <div class="todo-input-bar">
      <input type="text" id="new-todo" placeholder="请输入待办事项..." />
      <button id="add-btn">添加</button>
    </div>
    <ul class="todo-list" id="todo-container">
      <li><span>阅读原生DOM选择器文档</span><button class="del-btn">删除</button></li>
    </ul>
  </div>

  <script>
    // 等待 DOM 准备完毕
    document.addEventListener('DOMContentLoaded', () => {
      // 1. 基础选择器获取主要控件
      const inputEl = document.querySelector('#new-todo');
      const addBtn = document.querySelector('#add-btn');
      const containerEl = document.querySelector('#todo-container');

      // 添加新项的业务逻辑
      function addTodo() {
        const text = inputEl.value.trim();
        if (!text) return;

        // 动态构建 DOM 元素
        const li = document.createElement('li');
        li.innerHTML = `<span>${text}</span><button class="del-btn">删除</button>`;
        containerEl.appendChild(li);

        inputEl.value = ''; // 清空输入框
        inputEl.focus();
      }

      // 2. 为按钮和输入框分别绑定事件
      addBtn.addEventListener('click', addTodo);
      inputEl.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
          addTodo();
        }
      });

      // 3. 在父容器上使用事件委托，处理删除和点击完成
      containerEl.addEventListener('click', (event) => {
        // 如果点击的是删除按钮
        if (event.target.classList.contains('del-btn')) {
          const item = event.target.closest('li');
          if (item) item.remove();
          return;
        }

        // 如果点击的是文本内容，切换完成划线
        const item = event.target.closest('li');
        if (item) {
          item.classList.toggle('done');
        }
      });
    });
  </script>
</body>
</html>

通过上面的示例可以看出，运用原生 querySelector、addEventListener 配合事件委托模式，仅用几十行代码就能构建出逻辑清晰、结构安全且无任何额外依赖的交互应用。掌握这些底层知识，不仅是在现代框架（如 React、Vue）下排查深层次事件问题的基石，也是成为成熟前端开发者的必经之路。