JavaScript DOM操作入门：怎么选中元素并修改页面内容

当我们在网页上点击一个按钮，看到提示文字发生改变，或者商品列表新增了一项内容，这背后起作用的通常就是 JavaScript 对文档对象模型（Document Object Model，简称 DOM）的操作。简单来说，DOM 是浏览器把 HTML 页面解析成的一个树状对象结构。在前端开发中，所有动态更新界面的行为都可以归结为两步：先在页面树中精准找到需要操作的目标元素，然后对该元素的属性、文本或子节点进行更新。掌握这两个基础环节，是使用 JavaScript 驱动网页交互的起点。

一、认识 DOM 树与操作的基本流程

编写的 HTML 文档本质上只是一段纯文本标记。当浏览器加载并渲染网页时，它会自顶向下解析标签，在内存中生成一棵具有层级关系的节点树。根节点是顶层的 document 对象，下面依次挂载 <html>、<head>、<body> 以及各个具体的页面容器、标题和段落。

每一个 HTML 标签在 DOM 树中都会映射为一个具体的元素对象（Element）。由于 JavaScript 拥有操作内存中这些对象的接口，因此我们可以随时读取或覆写元素的内部属性。整个操作的核心闭环包含三个明确环节：基于规则检索节点、验证节点有效性、执行属性或内容更新。

图1：DOM 树的层级结构与 JavaScript 动态更新运行机制

二、精准定位：怎么在页面中选中元素

要修改任何东西，第一步都是准确选中它。如果选错对象或者根本没有选中，后续的代码不仅不会生效，还可能抛出报错中断脚本运行。目前现代浏览器主要推荐使用支持 CSS 选择器语法的原生 API。

1. 常用选择方法一览

• document.querySelector(selector)：接收一个标准 CSS 选择器字符串，返回匹配到的第一个元素。如果找不到，返回 null。
• document.querySelectorAll(selector)：返回匹配该选择器的所有元素集合（一个静态的 NodeList）。
• document.getElementById(id)：传统但高效的方法，按 ID 精准获取唯一元素。

在日常开发中，querySelector 和 querySelectorAll 能够满足绝大多数需求，因为它们支持类名（.class）、ID（#id）、属性选择器（[data-role="btn"]）以及复合后代选择器。

图2：常见 DOM 查询方法及其特性对比

2. 查询操作代码示例

// 1. 通过 ID 获取页面唯一的主标题
const mainTitle = document.querySelector('#main-heading');

// 2. 获取具有特定类名的段落
const infoParagraph = document.querySelector('.info-box > p');

// 3. 批量获取一组待办项，并使用 forEach 遍历
const taskItems = document.querySelectorAll('.task-list li');
taskItems.forEach((item, index) => {
  console.log(`第 ${index + 1} 个任务:`, item.textContent);
});

const target = document.querySelector('.user-name');
if (target) {
  target.textContent = '张三';
}

三、修改页面内容：核心属性与具体实践

成功获取到元素对象后，就可以通过修改其属性来更新页面。根据需要修改的内容类型（纯文本、HTML 结构或标签属性），有不同的属性可供使用。

1. textContent 与 innerHTML 的本质区别

初学者最常混淆的是 textContent 与 innerHTML：

• textContent（推荐用于纯文本）：用于读取或写入元素内部的纯文本。即使赋值字符串中含有 <span> 等标签，浏览器也会将其当做普通字符原样展示，不会被解析为 HTML。这样能有效避免跨站脚本攻击（XSS）。
• innerHTML（用于注入或替换标签结构）：允许传入包含 HTML 标签的字符串，浏览器会把该字符串解析成真正的 DOM 子树。只有在确实需要动态构建新标签结构时才使用。

const container = document.querySelector('#content-card');

// 修改纯文本（安全、快捷）
container.textContent = '数据已成功加载！';

// 注入带有格式的 HTML 结构
container.innerHTML = '<p>状态：<strong style="color: green;">在线</strong></p>';

2. 修改常用属性与样式类

除了文本内容，很多时候我们还需要改变图片的来源、超链接的地址或者元素的可见状态：

• 常规属性：直接通过属性名或 setAttribute / getAttribute 修改，例如 img.src = 'avatar.png'。
• CSS 样式类：建议使用 classList 对象，它提供了 add()、remove()、toggle() 等方法，而不是直接覆写 className 字符串。

图3：DOM 操作的标准四步工作流与安全策略

四、完整实战：构建一个可交互的状态修改卡片

为了让知识具体落地，下面看一个完整的可运行示例。在这个例子中，页面包含一个用户信息展示框和一个按钮。点击按钮后，JavaScript 将选中对应节点并更新姓名、简介和徽标状态。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .card { border: 1px solid #ccc; padding: 16px; width: 280px; border-radius: 8px; }
    .badge-active { color: #16a34a; font-weight: bold; }
    .badge-pending { color: #d97706; }
  </style>
</head>
<body>

  <div class="card" id="user-profile">
    <h3 id="user-name">未登录</h3>
    <p id="user-bio">请点击下方按钮更新用户资料</p>
    <span id="user-status" class="badge-pending">● 离线</span>
  </div>

  <button id="update-btn" style="margin-top: 12px;">更新用户数据</button>

  <script>
    // 1. 获取触发按钮和目标内容元素
    const updateBtn = document.querySelector('#update-btn');
    const nameEl = document.querySelector('#user-name');
    const bioEl = document.querySelector('#user-bio');
    const statusEl = document.querySelector('#user-status');

    // 2. 绑定点击事件，执行内容与样式的修改
    updateBtn.addEventListener('click', () => {
      if (!nameEl || !bioEl || !statusEl) return;

      // 修改文本内容
      nameEl.textContent = '李雷 (高级前端工程师)';
      bioEl.textContent = '专注于现代化 Web 交互开发与体验优化。';

      // 修改样式类与提示
      statusEl.textContent = '● 已上线';
      statusEl.classList.remove('badge-pending');
      statusEl.classList.add('badge-active');
    });
  </script>
</body>
</html>

运行这段代码后，可以看到在点击按钮的瞬间，页面的文字与视觉状态同步发生了改变，而整个过程中浏览器没有重新刷新页面。这就是 DOM 编程带来的即时交互体验。

五、入门进阶总结与知识全景

回顾整个 DOM 入门的核心概念，我们可以将整个交互体系总结为三个层级：选择器、修改器与生命周期时机。

图4：JavaScript DOM 核心操作知识架构与最佳实践

只要牢记“先有树再查找”、“选择器精准定位”、“区分纯文本与HTML标签”，并在修改前做好防范性非空校验，就能在编写前端原生交互代码时做到条理清晰、稳健无误。