怎么使用JavaScript操作DOM元素与响应事件

作者：像素漫游

时间：2026-10-30

深入浅出地讲解如何使用JavaScript查找与操作DOM节点元素、修改属性与样式、监听和响应用户事件，并详细剖析事件流机制与事件委托性能优化策略。

文章目录

在现代网页交互中，JavaScript 最核心的作用之一就是扮演页面逻辑与用户行为之间的桥梁。简单来说，开发者通过 DOM（文档对象模型）提供的接口查找、创建或修改页面节点，并使用事件监听机制捕获点击、输入等交互行为，进而驱动界面做出即时响应。本文将从元素查询定位、内容与样式修改、事件监听机制以及性能优化策略四个维度展开，提供规范清晰的实用操作指南。

一、精准定位与获取 DOM 元素

DOM（Document Object Model）将 HTML 页面解析成由节点构成的树状结构。在执行任何修改操作之前，第一步必须获得目标节点的引用。现代 JavaScript 提供了统一且灵活的选择器 API，能够满足根据标签、ID、类名或复合 CSS 规则进行查询的各类场景。

怎么使用JavaScript操作DOM元素与响应事件 — 图 1：DOM 树层级模型与常用元素查询方法对应关系

常用查询 API 核心用法

日常开发中最常使用的选择方式分为单元素查询与多元素列表查询：

document.getElementById(id)：通过唯一 ID 查找元素，速度极快；未找到时返回 null。
document.querySelector(selector)：接收标准 CSS 选择器字符串（如 .nav > li.active），返回文档中第一个匹配项。
document.querySelectorAll(selector)：接收 CSS 选择器，返回所有匹配项组成的静态 NodeList 集合。可通过 forEach 遍历。

// 1. 获取唯一标题元素
const mainTitle = document.getElementById('title');

// 2. 使用复杂选择器获取提交按钮
const submitBtn = document.querySelector('form.user-profile button[type="submit"]');

// 3. 批量获取同类项目并遍历处理
const actionButtons = document.querySelectorAll('.action-btn');
actionButtons.forEach((btn, index) => {
  btn.setAttribute('data-index', String(index));
});

二、修改元素内容、样式与属性

成功获取 DOM 引用后，即可对其文本内容、HTML 结构、HTML 属性以及 CSS 样式类进行修改。理解不同修改方式的安全边界和性能影响是写出健壮代码的前提。

1. 内容写入：textContent 与 innerHTML 的选型

属性名称	主要功能	安全性与性能	推荐使用场景
`textContent`	读取或设置纯文本，保留空白符，忽略 HTML 标签	安全无注入风险；纯文本解析速度快	更新用户名、文本摘要、数值展示等所有非富文本场景
`innerHTML`	读取或写入包含 HTML 标签的富文本字符串	若拼接用户未经转义的输入，极易诱发 XSS 漏洞	仅在数据完全可信、确实需要解析复杂嵌套 HTML 片段时使用

2. 属性与样式类的维护

直接操作内联样式（如 element.style.color = 'red'）会导致 CSS 优先级混乱并使得样式分散在代码各处。推荐通过 classList 管理预设的 CSS 类名：

classList.add('className')：追加样式类。
classList.remove('className')：移除样式类。
classList.toggle('className')：存在则移除，不存在则添加（常用于折叠面板、暗色模式切换）。
classList.contains('className')：判断是否包含某类名，返回布尔值。

// 动态创建一个提示卡片并配置样式
const alertBox = document.createElement('div');
alertBox.textContent = '数据已成功同步！';

// 推荐使用 classList 维持关注点分离
alertBox.classList.add('alert', 'alert-success');

// 设置自定义数据属性 (dataset)
alertBox.dataset.timestamp = String(Date.now());

// 挂载到页面指定容器内部末尾
const container = document.querySelector('.notification-area');
container.append(alertBox);

三、事件监听与事件流机制

网页的动态交互依赖于事件驱动。用户在浏览器中的点击、悬停、按键、滚动等行为都会派发事件。通过为 DOM 节点注册事件监听器，开发者即可指定在特定事件触发时执行对应的回调函数。

1. 标准绑定：addEventListener 方法

早期在 HTML 中书写 onclick="handler()" 或对属性赋值 element.onclick = ... 的方式存在严重缺点：前者使代码高度耦合，后者无法为同一元素绑定多个独立监听函数。现代开发必须采用 addEventListener：

// 基础事件监听语法结构
targetElement.addEventListener(type, listener, options);

参数说明：

type：区分大小写的事件类型字符串，例如 'click', 'input', 'keydown', 'submit'。
listener：事件发生时调用的回调函数，接收一个 Event 对象作为入参。
options（可选）：布尔值或配置对象。如 { once: true } 表示仅响应一次后自动注销。

2. 事件对象（Event）的核心属性与方法

在监听函数内部，浏览器会隐式传入 event 对象，其承载了与当前行为相关的所有上下文信息：

event.target：真正触发事件的源头元素（例如用户实际点击的图标或文本）。
event.currentTarget：当前正在处理该事件的元素（即挂载 addEventListener 的元素，等同于回调函数内的 this）。
event.preventDefault()：取消浏览器的默认动作（如阻止链接 <a> 默认跳转，或阻止表单 <form> 刷新页面）。
event.stopPropagation()：停止事件在捕获或冒泡链上的后续传递，防止触发父级祖先节点的同类监听器。

const link = document.querySelector('a.download-link');

link.addEventListener('click', function(event) {
  // 1. 阻止链接直接发起默认的 URL 导航
  event.preventDefault();

  // 2. 检查权限后再行跳转
  if (!userIsLoggedIn) {
    alert('请登录后下载文件');
    return;
  }

  // 验证通过，继续业务逻辑
  window.location.href = this.href;
});

四、进阶模式：事件委托（Event Delegation）

当页面中存在大量重复子元素（如商品列表、表格行）或者子元素是通过异步请求动态渲染生成时，逐个为每个子元素调用 addEventListener 会产生两个明显弊端：内存占用显著增加、新增节点无法自动具备交互能力。

事件委托的核心原理：由于事件具有向外冒泡的特性，子节点上的交互终将冒泡至其父级甚至跟节点。因此，只需在公共父容器上绑定一个事件监听器，利用 event.target 配合 Element.prototype.closest() 定位目标元素，便能以极小成本管理所有子节点交互。

// HTML 结构示例：
// <ul id="todo-list">
//   <li data-id="101"><span>待办任务 A</span><button class="del-btn">删除</button></li>
// </ul>

const todoList = document.getElementById('todo-list');

// 仅在父容器注册单个监听器
todoList.addEventListener('click', (event) => {
  // 1. 检查点击源是否为删除按钮，或位于删除按钮内部
  const deleteBtn = event.target.closest('.del-btn');
  
  if (deleteBtn && todoList.contains(deleteBtn)) {
    // 2. 向上寻找对应的父级列表项
    const listItem = deleteBtn.closest('li');
    const taskId = listItem.dataset.id;

    // 3. 执行业务删除逻辑并更新 DOM
    listItem.remove();
    console.log(`已成功移除任务项 ID: ${taskId}`);
  }
});

注意事项：大部分常用交互事件（如 click, keydown, input）都会自然冒泡，但少数事件默认不参与冒泡，例如 focus、blur、mouseenter、mouseleave。如需在父级监听输入框聚焦，应改用对应具有冒泡特性的 focusin 和 focusout 事件。

五、常见问题排查与工程最佳实践

在实际项目中，除了掌握基本语法，防范内存泄漏与保障脚本运行时序同样至关重要：

1. 脚本执行时机问题

如果在 HTML 结构尚未解析完成时便通过 JavaScript 查询节点（例如将 <script> 放在 <head> 内部且未加任何属性），选择器将返回 null，导致后续属性读取报错 Uncaught TypeError: Cannot read properties of null。

解决方案：

在 HTML 中为 <script> 增加 defer 属性：<script src="app.js" defer></script>，让脚本异步下载并在 HTML 解析完成后顺序执行。
或者监听 DOMContentLoaded 事件，确保页面骨架就绪后再执行初始化逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // DOM 树已全部解析完毕，此处执行查询和绑定绝对安全
  const appContainer = document.getElementById('app');
  initUserInterface(appContainer);
});

2. 内存泄漏与事件解绑

若某个 DOM 节点已被从页面中移除，但该节点上注册的监听器引用了外部闭包变量，且监听器未被正确销毁，该节点就无法被垃圾回收机制（Garbage Collection）回收，形成内存泄漏。

解绑监听器需要调用 removeEventListener(type, listener)，前提是必须传入同一个具名函数引用。匿名内联函数（如箭头函数）每次声明都会创建全新的内存地址，无法被 removeEventListener 命中解除。

function handleResize() {
  console.log('窗口尺寸调整中...');
}

// 绑定具名函数
window.addEventListener('resize', handleResize);

// 在页面卸载或组件销毁时正确解绑
window.removeEventListener('resize', handleResize);

3. 批量更新减少重排（Reflow）

每一次将新节点插入到活动 DOM 树中，浏览器都需要重新计算布局并触发重排。若循环向页面添加数百个元素，频繁的插入操作将导致严重的性能卡顿。此时应借助 DocumentFragment：

const userListContainer = document.getElementById('user-list');
const fragment = document.createDocumentFragment();

// 在内存碎片中一次性组装全部子节点
userDataList.forEach((user) => {
  const item = document.createElement('li');
  item.textContent = `${user.name} - ${user.role}`;
  fragment.appendChild(item);
});

// 一次性挂载至真实 DOM，仅触发单次重排重绘
userListContainer.appendChild(fragment);

总结

掌握 JavaScript 操作 DOM 与事件响应的精髓，在于理解“获取、修改、响应、优化”的完整链路。从利用 querySelector 建立稳定引用，到使用 classList 与 textContent 维护安全清晰的视图状态；从基于 addEventListener 捕获交互，到运用事件委托模型解决高频动态列表的监听开销；再到依托 DocumentFragment 与具名函数解绑实现极致性能保障。遵循上述标准范式，即可编写出高效、健壮且易于长期维护的前端交互代码。