JavaScript DOM操作入门：怎么用代码修改网页内容

作者：竹影

时间：2026-10-30

面向初学者的 JavaScript DOM 操作指南。从 DOM 树概念讲起，手把手演示如何用 querySelector 选中元素，详解 textContent 与 innerHTML 修改网页文字与结构的实际用法与差异对比，并提供完整的可运行代码示例与避坑要点。

文章目录

修改网页内容的本质并不神秘：浏览器在加载 HTML 后，会把页面上的每一个标签都转换成内存中的 JavaScript 对象，这一整套对象关系被称为 DOM（文档对象模型）。用 JavaScript 修改网页内容，核心分为两步：先在页面中定位到想要修改的 HTML 元素，再通过修改该对象的属性来改变文字、结构或样式。

一、什么是 DOM：网页在 JavaScript 眼里的层级树

平时编写的 HTML 文件是一串静态文本，当浏览器打开它时，会逐行解析并将各个标签组织成一棵具有父子、兄弟关系的“对象树”。在这棵树中，<html> 是根节点，<head> 与 <body> 是它的子节点，而标题 <h1>、段落 <p> 和按钮 <button> 则是挂载在 <body> 之下的分支节点。

JavaScript 并不直接在原始 HTML 文本文件上涂改，而是通过浏览器提供的 document 全局对象访问这棵内存树。只要改变了树上某个节点的属性，浏览器便会即时重新计算排版并将新结果渲染在屏幕上。

图 1：文档对象模型（DOM）树结构关系与常用操控挂载点

二、DOM 操作四步流程：从抓取元素到屏幕更新

任何通过代码修改网页的行为，都可以分解为四个标准操作阶段：

定位目标元素：告诉浏览器要修改哪一个标签。现代 JavaScript 推荐使用 document.querySelector('CSS选择器')，它支持类名、ID 和属性选择器。
检查或读取状态：在修改前，如果需要判断内容（例如按钮是否已被禁用、输入框是否为空），先读取该对象的属性。
写入新数据：将新的文字字符串、HTML 结构或样式类名赋给对应的节点属性。
浏览器重绘生效：赋值完成后，浏览器渲染引擎在当前帧或下一个重排周期将改动呈现给用户，无需刷新整个网页。

图 2：DOM 内容修改的四步执行流程

三、修改内容的核心差异：textContent 与 innerHTML

初学者在修改网页文本时，最常遇到的困惑是：究竟该用 textContent 还是 innerHTML？虽然它们都能让页面上的文字发生变化，但背后的解析机制、性能表现以及安全影响完全不同。

比较维度	textContent	innerHTML
解析方式	作为纯文本直接写入节点，不启动 HTML 解析器	将字符串交给 HTML 解析器，重构内部整个 DOM 树
标签渲染	输入的 HTML 标签（如 `<b>`）会被原样当成文字打印	输入的 HTML 标签会被解析为真实结构元素
安全性	天生免疫 XSS 攻击，安全可靠	若插入不受信的用户输入，极易诱发脚本注入漏洞
执行性能	非常快，仅涉及单个文本节点赋值	相对较慢，需要销毁旧子节点并重新解析生成新节点
最佳实践	只要是纯文本替换、数字计数、状态显示，一律首选	仅在需要动态组装复杂的 HTML 片段时谨慎使用

图 3：textContent 与 innerHTML 在渲染机制与安全性上的直观对比

四、操作样式与属性：让内容呈现更丰富

修改内容不仅仅局限于文字本身，网页中的图片地址（src）、超链接（href）以及视觉样式通常也需要联动更新。

1. 修改标签属性

常规 HTML 属性可以直接通过对象属性访问，也可以使用标准方法：

// 方式一：直接点语法修改常见属性
const img = document.querySelector('#avatar');
img.src = 'https://example.com/new-avatar.png';
img.alt = '新用户头像';

// 方式二：使用 setAttribute 修改任意属性
const link = document.querySelector('a.download-link');
link.setAttribute('href', '/files/report-2026.pdf');
link.setAttribute('target', '_blank');

2. 修改外观样式：推荐使用 classList 而非内联 style

虽然可以直接使用 element.style.color = 'red' 赋予行内样式，但更好的习惯是将样式规则预先写在 CSS 类名中，在 JavaScript 中通过 classList 控制类名的添加或移除：

const messageBox = document.querySelector('#status-message');

// 添加高亮类名
messageBox.classList.add('active');

// 移除错误提醒类名
messageBox.classList.remove('error');

// 切换类名（存在则移除，不存在则添加，非常适合折叠面板或暗黑模式）
messageBox.classList.toggle('dark-mode');

五、实战示例：一个完整的按钮交互改写小案例

下面是一个可以在任意浏览器中直接运行的完整小案例。它展示了如何获取标题与按钮节点、如何绑定点击事件，并在点击时更新标题内容与样式类名：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .highlight {
      color: #879B88;
      font-size: 28px;
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>
  <h1 id="main-title">这是初始的标题文字</h1>
  <button id="change-btn">点击修改内容</button>

  <script>
    // 1. 获取 DOM 节点
    const titleElement = document.querySelector('#main-title');
    const actionButton = document.querySelector('#change-btn');

    // 2. 绑定点击事件监听器
    actionButton.addEventListener('click', function() {
      // 3. 修改文本内容
      titleElement.textContent = '内容已成功被 JavaScript 修改！';
      
      // 4. 动态添加高亮类名
      titleElement.classList.add('highlight');
      
      // 5. 改变按钮状态
      actionButton.textContent = '修改完毕';
      actionButton.disabled = true;
    });
  </script>
</body>
</html>

执行逻辑解析：当用户点击按钮时，回调函数被触发。通过 titleElement.textContent = '...'，页面标题立即更新。接着给它附上 highlight 类名，文本颜色随之变化，最后禁用按钮防止重复操作。整个过程流畅、轻量且无需页面刷新。

六、初学 DOM 常见避坑与总结

在实际操作中，初学者常常会遇到一些看似奇怪的报错，以下是三个最高频的问题及应对方案：

找不到元素（Cannot read properties of null）：这是最常见的错误。原因通常是把 <script> 放在了 <head> 中，此时 HTML 结构尚未解析完毕，querySelector 就会返回 null。解决方法是将脚本标签放在 </body> 结束标签的前一行，或者在 JavaScript 最外层监听 window.addEventListener('DOMContentLoaded', ...)。
选择器拼写错误：在 querySelector 中，按类名查找必须带点（.my-class），按 ID 查找必须带井号（#my-id），不要遗漏前缀符号。
避免在循环中滥用 innerHTML 拼接：每次修改 innerHTML 都会触发整个容器的重新构建。如果要在列表中追加 100 项，请先在内存中拼好完整字符串，或者使用 DocumentFragment 一次性插入，避免引起页面卡顿。