JavaScript怎么动态修改DOM内容与样式：innerHTML、textContent与classList详解

作者：微光

时间：2026-10-30

深入详解JavaScript中动态修改DOM内容与样式的核心API：innerHTML、textContent与classList的用法区别、安全防范、性能考量与最佳实践。

文章目录

在前端网页开发中，动态修改页面的文本、结构和视觉外观是最基础也是最高频的操作。JavaScript提供了多种操作DOM（文档对象模型）的接口，其中修改元素内容的两个核心属性是 innerHTML 和 textContent，而修改外观样式的标准工具则是 classList API。掌握它们的工作机制、安全边界以及样式解耦方式，能够帮助开发者写出既安全又具备良好维护性的前端代码。

一、DOM内容修改的核心属性：innerHTML 与 textContent

要向网页中的某个容器节点填充或替换内容，最常用的两个属性是 innerHTML 和 textContent。尽管两者都可以改变节点内部所呈现的信息，但底层解析逻辑和安全机制截然不同。

1. textContent：纯文本注入与安全基石

textContent 属性表示一个节点及其所有后代节点的纯文本内容。当向 textContent 赋值时，浏览器会将输入字符串全部作为纯字符对待，不会对其进行 HTML 语法解析。即使字符串中包含类似 <strong> 或 <script> 的标签片段，浏览器也会将其原样转义输出为纯文本节点。

// 选取目标元素
const titleEl = document.getElementById('user-greeting');

// 写入纯文本（即使包含HTML标签字符也会被安全转义）
titleEl.textContent = '欢迎回来，<VIP用户>！';
// 页面显示结果为：欢迎回来，<VIP用户>！，不会生成子标签

2. innerHTML：解析HTML片段与结构重绘

与纯文本相反，innerHTML 属性获取或设置的是指定元素内部包含的 HTML 标记字符串。为 innerHTML 赋值时，浏览器内置的 HTML 解析器会解析传入的字符串，构建对应的 DOM 子树，并完全替换该元素现有的所有子节点。

const listContainer = document.getElementById('card-list');

// 动态构建带有标签结构的HTML内容
listContainer.innerHTML = `
  <div class="card-item">
    <h4 class="card-title">核心模块</h4>
    <p class="card-desc">状态更新就绪</p>
  </div>
`;

安全防范重点（XSS跨站脚本攻击）： 绝不要将未经净化（Sanitize）的用户输入直接赋值给 innerHTML。如果攻击者提交了包含恶意属性（如 <img src="x" onerror="alert(1)">）的内容，浏览器解析后会立即触发恶意代码执行。对于不可信的输入文本，始终优先使用 textContent。

JavaScript怎么动态修改DOM内容与样式：innerHTML、textContent与classList详解

图 1：innerHTML与textContent在解析机制与安全表现上的核心区别

二、样式动态控制的最佳实践：为什么选择 classList

修改元素的外观通常有两种途径：直接修改内联样式（element.style.color = 'red'）或通过修改 CSS 类名切换预设样式。在现代 Web 标准中，强行使用内联样式存在明显的弊端：

样式污染与特异性过高： 内联样式具有极高的 CSS 优先级，会破坏外部样式表的层叠规则。
违反关注点分离（Separation of Concerns）： 业务逻辑混入具体视觉数值（如像素宽、十六进制颜色），难以维护与响应式适配。

因此，推荐通过操作类名来实现视觉状态的迁移。Element.classList 属性返回一个 DOMTokenList 集合，提供了一组简洁高效的方法来维护元素的类列表，彻底取代了早期拼接 className 字符串的繁琐方式。

classList 核心常用方法

方法	参数	功能说明	典型应用场景
`add(...)`	1个或多个字符串	为元素添加指定类名；若类名已存在则自动忽略，不重复添加。	激活某个状态，例如高亮选中项。
`remove(...)`	1个或多个字符串	从元素中移除指定类名；若类名不存在则静默处理，不报错。	重置状态，取消警报或收起面板。
`toggle(...)`	类名, [可选Boolean条件]	存在则移除，不存在则添加；传第二个参数时按布尔真假强行添加或移除。	折叠面板展开/收起、黑白主题切换。
`contains(...)`	单类名字符串	检查元素是否包含指定类名，返回 `true` 或 `false`。	分支逻辑判断，如检查弹窗当前是否打开。
`replace(...)`	旧类名, 新类名	将已存在的旧类名原子替换为新类名，返回替换结果布尔值。	状态转移，如 `status-pending` 转 `status-success`。

图 2：classList API 主要方法功能与语义关系图

三、实战操作全流程：动态更新内容与交互样式

下面通过一个完整而典型的业务场景——「异步任务执行面板」，完整演示如何结合 innerHTML、textContent 和 classList 完成状态与样式的同步更新。

图 3：DOM操作步骤流程——从元素检索、内容决策到样式状态迁移

综合代码示例

// 1. 获取需要操作的 DOM 节点
const statusBadge = document.getElementById('status-badge');
const actionBtn = document.getElementById('btn-submit');
const logContainer = document.getElementById('log-box');

// 2. 模拟触发操作
actionBtn.addEventListener('click', function() {
  // 进入「处理中」状态：添加 loading 类，移除已成功或失败类
  statusBadge.classList.remove('status-success', 'status-error');
  statusBadge.classList.add('status-loading');
  statusBadge.textContent = '任务正在同步中...';

  // 3. 模拟异步请求返回
  setTimeout(() => {
    const isSuccess = true;
    const responseMsg = '数据同步完成，耗时 120ms';

    if (isSuccess) {
      // 样式转移：将 loading 替换为 success
      statusBadge.classList.replace('status-loading', 'status-success');
      // 纯文本更新
      statusBadge.textContent = '同步成功';

      // 动态追加带结构的通知提示（信任的静态骨架 + 安全文本变量）
      logContainer.innerHTML = `
        <div class="notice-item success">
          <span class="icon">✔</span>
          <span class="msg"></span>
        </div>
      `;
      // 安全写入外部返回的消息
      logContainer.querySelector('.msg').textContent = responseMsg;
    } else {
      statusBadge.classList.replace('status-loading', 'status-error');
      statusBadge.textContent = '同步失败，请重试';
    }
  }, 1000);
});

四、常见问题排查与性能陷阱

在日常使用中，若对底层原理缺乏了解，容易遇到一些隐蔽的 Bug 或性能瓶颈：

1. 循环内频繁操作 innerHTML 引发重排（Reflow）

每次给 innerHTML 赋值时，浏览器都必须调用 HTML 解析器销毁旧子树并构建新树，这伴随着昂贵的重排与重绘。如果在一个遍历循环中反复拼接：

// 错误示例：每次循环都重新解析整个DOM树
const list = document.getElementById('item-list');
for (let i = 0; i < items.length; i++) {
  list.innerHTML += `<li>${items[i].name}</li>`; // 极度消耗性能
}

// 正确示例：在内存中拼接完成后一次性赋值
let htmlBuffer = '';
for (let i = 0; i < items.length; i++) {
  htmlBuffer += `<li>${items[i].name}</li>`;
}
list.innerHTML = htmlBuffer;

2. innerHTML 会导致已有子元素的事件监听器丢失

当父元素的 innerHTML 被重写时，父元素内原先存在的所有子 DOM 节点都被销毁，新生成的节点即使看起来一模一样，也是全新的对象。原来通过 addEventListener 绑定在旧子节点上的事件监听器全部随之失效。如果需要保留子元素事件绑定，应使用 appendChild 或仅更新目标子节点的 textContent。

3. classList 方法参数中包含空格会抛出异常

classList.add('class-a class-b') 会直接抛出 DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided contains HTML space characters。单个类名不能包含空格。正确的多类添加方式是传递多个独立参数：classList.add('class-a', 'class-b')。

五、总结：核心决策与API选型

动态修改 DOM 内容与样式是构建现代交互界面的基本功。理解每种方式的职责边界，能从源头上杜绝安全隐患和维护困难：

需要更新纯文本或展示外部数据： 毫不犹豫选择 textContent，免除 XSS 风险且性能最高。
需要创建或重组复杂 HTML 节点结构： 在确保数据已净化或来源完全受信任的前提下，使用 innerHTML 进行批量构建。
需要根据交互改变元素外观视觉： 使用 classList 系列方法（add / remove / toggle / replace）操作预定义的 CSS 类，保持脚本逻辑与表现层样式的高度解耦。