怎么用JavaScript操作网页元素？DOM基础与事件处理入门

一、认识DOM：HTML文档的树状对象映射

当浏览器加载HTML代码时，它并不会把页面仅仅看作一串长文本，而是会逐行解析标签，在内存中构建出一棵由JavaScript对象组成的层次树，这就是DOM树。

在DOM树中，一切皆是“节点”（Node）。最顶层的根是 document 对象，它是JavaScript访问整个网页的入口点。HTML中的每个标签对应一个“元素节点”（Element Node），标签内部的文字对应“文本节点”（Text Node），而诸如 class、id、href 等则是“属性节点”（Attribute Node）。因为这些节点具有严格的父子、兄弟关系，JavaScript可以像攀爬树木一样顺着树干分支精准找到任何一个具体部件。

二、获取元素：找到要操作的目标节点

要让JavaScript控制一个元素，第一步必须在页面中把它选出来并存入变量。早期的DOM API提供了 getElementById、getElementsByClassName 等分类方法，而现代JavaScript开发中最通用、最直观的是基于CSS选择器语法的两组API：

1. querySelector 与 querySelectorAll

• document.querySelector(selector)：匹配满足CSS选择器条件的第一个元素。若没有匹配项，返回 null。
• document.querySelectorAll(selector)：匹配所有满足条件的元素，返回一个静态的节点列表（NodeList）。

// 1. 通过 ID 选择元素（注意前缀 #）
const submitBtn = document.querySelector('#btn');

// 2. 通过 类名 选择单个元素（注意前缀 .）
const mainTitle = document.querySelector('.main-title');

// 3. 复合选择器：选取类名为 list 下的所有 li 标签
const listItems = document.querySelectorAll('.list > li');

// 4. 遍历所有匹配到的元素
listItems.forEach((item, index) => {
  console.log(`第 ${index + 1} 项内容:`, item.textContent);
});

三、修改元素：内容、属性与样式变更

成功获取到元素节点对象后，就可以对它的内容、HTML属性以及外观样式进行实时读写。

1. 修改文本与HTML结构

常用的属性有 textContent 和 innerHTML：

• element.textContent：安全地读取或设置元素内部的纯文本内容。传入带有HTML标签的字符串时，标签会被原样转义输出为字符，不会被浏览器解析，这能有效防范跨站脚本注入（XSS）。
• element.innerHTML：读取或写入包含HTML标签的字符串，浏览器会将其重新解析为DOM结构。当需要动态插入新标签组合时使用，但应避免直接拼接不可信的用户输入内容。

2. 修改HTML属性与类名（classList）

虽然可以通过 element.setAttribute('class', 'active') 来设置属性，但在控制样式类名时，推荐使用专用的 element.classList 接口，它提供了结构清晰的方法：

const card = document.querySelector('.card');

// 添加类名
card.classList.add('highlight');

// 移除类名
card.classList.remove('inactive');

// 切换类名：若存在则删除，不存在则添加
card.classList.toggle('active');

// 判断是否含有特定类名
if (card.classList.contains('active')) {
  console.log('当前卡片处于激活状态');
}

3. 控制内联样式

可以通过 element.style 属性直接指定内联CSS样式。需要注意，CSS属性名在JavaScript中通常采用“小驼峰式命名”（camelCase）：

const box = document.querySelector('.box');

// 对应 CSS 中的 background-color
box.style.backgroundColor = '#52677D';

// 对应 CSS 中的 font-size
box.style.fontSize = '18px';

// 隐藏或显示元素
box.style.display = 'none';

四、事件处理入门：让网页响应用户操作

静态修改内容只是单向呈现，真正赋予页面灵魂的是“事件处理”。所谓事件，就是用户在浏览器中做出的动作，例如按下鼠标（click）、键盘敲击（keydown）、文本输入（input）或者页面加载完毕（DOMContentLoaded）。

1. 标准绑定方法：addEventListener

规范的事件绑定语法如下：

element.addEventListener(eventType, handlerFunction, useCapture);

• eventType：事件名称字符串，例如 'click'、'input'（注意不带“on”前缀）。
• handlerFunction：事件发生时执行的回调函数，浏览器会自动将一个描述该事件细节的“事件对象”（Event）传给它。
• useCapture：可选布尔值，默认 false（在冒泡阶段捕获）。

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

actionBtn.addEventListener('click', (event) => {
  // event.target 代表实际被点击的节点
  console.log('按钮被点击了，触发源:', event.target);
  
  // 阻止浏览器的默认动作（例如超链接跳转或表单提交刷新页面）
  event.preventDefault();
});

2. 理解事件流：捕获、目标与冒泡

当你在屏幕上点击一个位于多层容器嵌套之内的按钮时，事件并不是凭空只在按钮上出现的。浏览器会经历完整的“事件流”（Event Flow）：

1. 捕获阶段（Capturing Phase）：事件由最外层的 Window 节点开始向下传递，经过 document、html、body、父级 div，逐级靠近目标。
2. 目标阶段（Target Phase）：事件到达实际被点击的按钮自身，执行目标元素上绑定的处理程序。
3. 冒泡阶段（Bubbling Phase）：事件从目标节点开始，沿原来的路径反向逐级向上传播回最顶层的 Window。

在绝大多数实际业务中，我们监听的都是冒泡阶段。利用事件冒泡特性，还能实现极具效率的“事件委托”（Event Delegation）：例如在一个包含100个列表项的 <ul> 中，不需要给每个 <li> 绑定监听，只需在父容器 <ul> 上绑定一次监听，通过判断 event.target 即可统一处理所有子项的交互。

五、实战示例：构建一个动态待办事项交互

下面通过一个轻量且完整的案例，将前面学到的“元素查找”、“创建修改节点”与“事件监听”串联起来。该案例实现了一个简单的输入添加与点击删除列表功能：

<!-- HTML 基础骨架 -->
<div class="todo-app">
  <input type="text" id="todo-input" placeholder="输入任务名称..." />
  <button id="add-btn">添加任务</button>
  <ul id="todo-list"></ul>
</div>

<script>
  // 1. 获取输入框、按钮和列表容器
  const todoInput = document.querySelector('#todo-input');
  const addBtn = document.querySelector('#add-btn');
  const todoList = document.querySelector('#todo-list');

  // 2. 绑定“添加任务”点击事件
  addBtn.addEventListener('click', () => {
    const text = todoInput.value.trim();
    if (!text) {
      alert('任务内容不能为空！');
      return;
    }

    // 3. 动态创建新的 li 节点
    const li = document.createElement('li');
    li.textContent = text;

    // 创建删除按钮
    const delBtn = document.createElement('button');
    delBtn.textContent = '删除';
    delBtn.classList.add('delete-btn');
    delBtn.style.marginLeft = '12px';

    // 组合节点并挂载到DOM树
    li.appendChild(delBtn);
    todoList.appendChild(li);

    // 清空输入框并聚焦
    todoInput.value = '';
    todoInput.focus();
  });

  // 4. 事件委托：通过父容器 todoList 统一监听删除事件
  todoList.addEventListener('click', (event) => {
    // 判断被点击的是否是删除按钮
    if (event.target.classList.contains('delete-btn')) {
      const targetLi = event.target.parentElement;
      targetLi.remove(); // 直接从DOM中移除该项
    }
  });
</script>

在这个案例中，注意第4步使用的事件委托方式：并没有在每次生成删除按钮时调用 delBtn.addEventListener，而是在外部父容器 todoList 上只绑定了一次监听。无论以后动态新增多少条任务，删除逻辑都能稳定工作，且不会造成多余的事件监听器内存消耗。

六、核心要点总结与工程建议

掌握JavaScript操作网页元素，不需要死记硬背成百上千个API，而是要把握核心逻辑体系。以下将关键模块梳理为知识全景：