怎么用JavaScript操作DOM修改网页内容与样式

在浏览器环境中，网页在加载后会被解析为一棵由节点构成的对象树，即文档对象模型（Document Object Model，简称 DOM）。JavaScript 并不直接读写原始的 HTML 文本字符串，而是通过操作内存中的 DOM 节点对象来即时更新页面。操作的核心工作流程可以概括为两步：首先使用精确的选择器定位到目标元素节点，随后读写该节点提供的内容属性或视觉样式接口。

图 1：DOM 树层级关系与 JavaScript 操控入口示意图

一、准备工作：定位要操作的 DOM 元素

要改变网页上的任意元素，第一步是获取该元素的引用。现代 JavaScript 开发中，推荐优先使用标准化程度高、支持 CSS 选择器语法的查询方法。

1. 常用查询接口

• document.querySelector(selectors)：接收 CSS 选择器字符串，返回文档中匹配该选择器的第一个元素；若未找到则返回 null。
• document.querySelectorAll(selectors)：返回匹配指定选择器的所有元素集合（一个静态的 NodeList）。
• document.getElementById(id)：通过唯一 ID 查找元素，性能极高，适合明确知道 ID 的单一元素。

// 1. 获取 ID 为 headline 的单个标题元素
const titleEl = document.querySelector('#headline');

// 2. 获取包含 class="status-badge" 的所有徽章元素
const badgeList = document.querySelectorAll('.status-badge');

// 3. 经典 ID 选取方法
const submitBtn = document.getElementById('submit-btn');

二、DOM 操作标准执行流程

无论页面交互逻辑多么复杂，每一次对界面内容与样式的修改，均遵循一条清晰、严谨的工程执行管线：精准定位、状态校验、变更应用与结果渲染。

图 2：JavaScript 操作 DOM 修改内容与样式的标准步骤流水线

三、修改网页内容：选择合适属性

修改网页内容主要分为修改纯文本、注入 HTML 片段以及更新 HTML 标签自带的原生属性。

1. 修改纯文本：textContent

当只需要更改页面中的文字（例如按钮文案、提示信息、数字金额）时，应始终使用 textContent 属性。赋值时浏览器会将字符串作为纯文本解析，即使内容中含有 <script> 或 <div> 等字符，也会被安全转义为普通字符输出，能彻底杜绝跨站脚本攻击（XSS）。

const countSpan = document.querySelector('#cart-count');
if (countSpan) {
  countSpan.textContent = '5'; // 安全修改文字
}

2. 注入或重写 HTML 片段：innerHTML

如果需要同时修改内容并包含新的标签结构（例如动态生成带加粗标签的提示文本），可以使用 innerHTML。但必须注意：严禁将未经验证的用户输入直接拼接进入 innerHTML，否则极易引发安全漏洞。对于固定可控的内部模板，它是非常快捷的重写手段。

const noticeBox = document.querySelector('#notice-box');
if (noticeBox) {
  // 插入带有标签的结构
  noticeBox.innerHTML = '<span style="font-weight:bold">系统提醒：</span>您的设置已成功保存。';
}

3. 修改标签原生属性与表单值

对于输入框、图片地址、超链接等特定属性，既可以直接通过元素对象属性读写，也可以调用 setAttribute / removeAttribute：

const userAvatar = document.querySelector('#avatar-img');
const nicknameInput = document.querySelector('#nickname-field');

if (userAvatar) {
  // 直接修改属性或使用 setAttribute
  userAvatar.src = '/static/images/user-01.png';
  userAvatar.alt = '用户头像';
}

if (nicknameInput) {
  // 修改输入框当前填入的值必须使用 value 属性
  nicknameInput.value = '张三';
}

四、修改网页样式：内联样式与类名控制

在前端工程实践中，修改视觉样式有两种主流途径：直接操作元素的 style 属性写入内联样式，或者通过 classList 增删预先写好的 CSS 类。二者适用场景截然不同。

图 3：DOM 内容与样式修改技术选型对比图

1. 最佳实践：使用 classList 操作预设样式类

前端开发中最为推崇的方式是将所有外观样式写在 CSS 文件中，JavaScript 仅通过 element.classList 接口来增加、删除或切换类名。这样做能保持结构、表现与行为的分离，极大提升代码可维护性。

• el.classList.add('active')：为元素添加一个类名。
• el.classList.remove('loading')：从元素移除指定类名。
• el.classList.toggle('dark-mode')：若存在该类名则移除，不存在则添加（非常适合开关与折叠面板）。
• el.classList.contains('active')：检查元素是否包含某类名，返回布尔值。

// 切换菜单展开/收起状态
const menuDrawer = document.querySelector('#sidebar-menu');
const toggleBtn = document.querySelector('#toggle-btn');

if (toggleBtn && menuDrawer) {
  toggleBtn.addEventListener('click', () => {
    menuDrawer.classList.toggle('is-open');
  });
}

2. 直接写入内联样式：element.style

当样式的数值无法在 CSS 中预先固定（例如随鼠标拖拽动态计算的 left 坐标、随加载进度动态改变的 width 百分比），可以直接给 element.style 赋值。

const progressBar = document.querySelector('.progress-fill');
if (progressBar) {
  const currentPercent = 75; // 假设经由网络请求算出的进度
  progressBar.style.width = currentPercent + '%';
  progressBar.style.backgroundColor = '#10b981';
}

3. 读取真实视觉样式：getComputedStyle

许多初学者容易犯一个错误：试图通过 element.style.width 读取写在外部 CSS 文件里的宽度。事实上，element.style 只能读取到标签上的行内内联样式。如果需要获取经浏览器层叠计算后的真实样式，必须使用 window.getComputedStyle(element)：

const box = document.querySelector('#box');
if (box) {
  const computed = window.getComputedStyle(box);
  console.log('真实计算宽度:', computed.width); // 输出如 "240px"
  console.log('真实背景颜色:', computed.backgroundColor); // 输出如 "rgb(52, 94, 130)"
}

五、综合实战：构建一个动态状态反馈卡片

下面通过一个完整的实用示例，演示如何结合事件监听、条件判断，同时修改元素的内容、结构与样式状态。

<!-- 示例 HTML 结构 -->
<div id="alert-card" class="card card-info">
  <h3 id="alert-title">系统准备就绪</h3>
  <p id="alert-desc">当前未检测到异常，等待任务下发。</p>
  <button id="action-btn">模拟触发告警</button>
</div>

<script>
  const alertCard = document.querySelector('#alert-card');
  const alertTitle = document.querySelector('#alert-title');
  const alertDesc = document.querySelector('#alert-desc');
  const actionBtn = document.querySelector('#action-btn');

  if (actionBtn && alertCard && alertTitle && alertDesc) {
    actionBtn.addEventListener('click', () => {
      // 1. 修改纯文本与属性
      alertTitle.textContent = '警告：数据库连接超时';
      alertDesc.textContent = '尝试重新连接失败，请检查端口配置与网络连通性。';
      actionBtn.disabled = true;
      actionBtn.textContent = '处理中...';

      // 2. 通过 classList 切换外观状态
      alertCard.classList.remove('card-info');
      alertCard.classList.add('card-danger');

      // 3. 动态配置行内阴影加深提醒
      alertCard.style.boxShadow = '0 8px 24px rgba(220, 38, 38, 0.2)';
    });
  }
</script>

六、运行机制与性能优化总结

当通过 JavaScript 改变 DOM 内容或几何尺寸时，浏览器会经历重排（Reflow，计算布局尺寸位置）和重绘（Repaint，重绘外观像素）过程。频繁读写可能导致页面掉帧或卡顿。

图 4：DOM 操作与浏览器渲染流水线全景总结图

七、常见排查与避坑指南

1. 脚本执行时机过早导致找不到元素： 如果 <script> 标签放置在 <head> 中且未加 defer 属性，浏览器解析到脚本时 HTML 结构尚未解析，querySelector 将必定返回 null。
   解决方案： 给 <script> 标签添加 defer 属性，或者将脚本放在 </body> 结束标签之前，或者将逻辑包裹在 document.addEventListener('DOMContentLoaded', () => { ... }) 中。
2. 遗漏 CSS 属性单位导致赋值无效： 直接给 element.style.top = 100 赋值在严格模式下不会生效，因为缺少长度单位。必须写为带有明确单位的字符串：element.style.top = '100px'。
3. 类名带有小点（.）传给 classList： element.classList.add('.active') 是常见笔误。classList 接收的是纯粹的类名称，不需要加用于选择器的点号，正确写法为 element.classList.add('active')。