异常教程

HTML DOM 修改 HTML 内容（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，动态修改页面内容是提升用户体验的核心技术之一。无论是实时表单验证、动态加载数据，还是实现交互式界面，都离不开对 HTML 内容的精准控制。HTML DOM 修改 HTML 内容这一技能，正是开发者与用户之间建立“对话”的桥梁。本文将从零开始，通过通俗的比喻、分步骤的讲解和实战案例，帮助读者掌握这一关键技能。

什么是 HTML DOM？

DOM（Document Object Model，文档对象模型） 是 Web 开发中的一个核心概念，可以将其想象为一棵“网页的树”。每个 HTML 标签（如 <div>、<p>）都是树上的一个“节点”，而开发者可以通过 JavaScript 对这些节点进行“修剪”或“嫁接”，从而动态修改页面内容。

例如，假设页面中有一个标题：

<h1 id="title">欢迎来到我的网站</h1>

通过 DOM，你可以像这样“找到”这个标题，并修改它的文本内容：

document.getElementById("title").innerText = "欢迎回来！";

这种能力使得网页从静态文档变为可交互的动态界面。

基础操作：如何修改 HTML 内容？

1. 获取目标元素

修改内容的第一步是找到要操作的 HTML 元素。常用的获取方法包括：

  • 通过 ID 获取：document.getElementById("id-name")
  • 通过类名获取：document.getElementsByClassName("class-name")（返回 HTMLCollection）
  • 通过标签名获取：document.getElementsByTagName("tag-name")
  • CSS 选择器：document.querySelector("css-selector")（单个元素）或 document.querySelectorAll("css-selector")（多个元素）

比喻：这就像在图书馆中寻找一本书——ID 是唯一的索书号，而类名或标签名则像“小说区”或“科技区”的分类标签。

// 通过 ID 获取元素
const header = document.getElementById("header");

// 通过 CSS 选择器获取第一个按钮
const firstButton = document.querySelector("button");

2. 修改文本内容

最直接的修改方式是改变元素的文本内容。常用属性包括：

  • textContent：获取或设置元素及其子元素的纯文本内容
  • innerText：类似 textContent，但会忽略隐藏元素
  • innerHTML：获取或设置元素的 HTML 内容（包括标签和样式）

注意：

  • innerHTML 可能引入 XSS（跨站脚本）风险，需谨慎使用。
  • 若只需修改文本，优先使用 textContent。
// 修改文本内容
document.getElementById("greeting").textContent = "你好，今天天气不错！";

3. 修改 HTML 属性

除了文本，DOM 还允许修改元素的属性（如 src、href、style）。例如：

// 修改图片的 src 属性
document.querySelector("img").src = "new-image.jpg";

// 动态设置元素的类名
document.querySelector(".box").className = "highlight";

动态添加与删除元素

1. 创建新元素

使用 document.createElement("tag-name") 创建元素后，可通过以下步骤插入到 DOM 中：

  1. 设置新元素的属性、文本或子元素；
  2. 使用 appendChild() 或 insertBefore() 将其添加到目标位置。
// 创建并插入新列表项
const newItem = document.createElement("li");
newItem.textContent = "新任务";
document.querySelector("ul").appendChild(newItem);

2. 删除元素

通过 removeChild() 方法或直接使用 remove()（现代浏览器支持）：

// 删除第一个列表项
const firstItem = document.querySelector("li");
firstItem.remove();

结合事件监听实现交互

1. 监听用户操作

通过 addEventListener() 监听事件（如点击、输入），并在回调函数中修改内容。例如：

document.querySelector("button").addEventListener("click", function() {
    document.getElementById("result").textContent = "按钮被点击了！";
});

2. 实时表单验证

在表单提交前，通过 DOM 检查输入内容：

document.querySelector("form").addEventListener("submit", function(e) {
    const input = document.getElementById("username");
    if (input.value.trim() === "") {
        e.preventDefault(); // 阻止表单提交
        input.style.borderColor = "red";
        document.getElementById("error").textContent = "用户名不能为空！";
    }
});

高级技巧与优化

1. 动态样式修改

通过 style 属性直接操作元素样式：

// 使元素闪烁
document.getElementById("alert").style.animation = "blink 1s infinite";

2. 使用 CSS 选择器简化操作

querySelectorAll() 返回的 NodeList 支持遍历操作，例如批量修改元素：

// 为所有链接添加下划线
document.querySelectorAll("a").forEach(link => {
    link.style.textDecoration = "underline";
});

3. 节点遍历与替换

通过 replaceChild() 或 insertAdjacentHTML() 实现更复杂的结构修改：

// 替换元素内容
const container = document.getElementById("container");
const newContent = document.createElement("div");
newContent.innerHTML = "<p>新内容</p>";
container.replaceChild(newContent, container.firstChild);

实战案例：动态任务列表

1. 需求分析

创建一个可添加、删除任务的列表，要求：

  • 用户输入任务后点击按钮添加；
  • 每个任务项可单独删除。

2. HTML 结构

<input type="text" id="task-input">
<button id="add-btn">添加任务</button>
<ul id="task-list"></ul>

3. JavaScript 实现

document.getElementById("add-btn").addEventListener("click", function() {
    const input = document.getElementById("task-input");
    const taskText = input.value.trim();
    
    if (taskText === "") return; // 验证输入
    
    // 创建新任务项
    const newItem = document.createElement("li");
    newItem.textContent = taskText;
    
    // 添加删除按钮
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "删除";
    deleteBtn.addEventListener("click", function() {
        newItem.remove();
    });
    newItem.appendChild(deleteBtn);
    
    // 插入列表
    document.getElementById("task-list").appendChild(newItem);
    input.value = ""; // 清空输入框
});

结论

通过本文的讲解，读者应已掌握 HTML DOM 修改 HTML 内容的核心方法：从基础的文本修改到动态元素的增删，再到结合事件与样式实现交互。这一技能是构建现代 Web 应用的基石，无论是简单的表单验证，还是复杂的动态界面，都能通过 DOM 操作实现。

下一步建议：

  1. 尝试将案例扩展为可拖拽排序的任务列表；
  2. 探索 MutationObserver 监控 DOM 变化；
  3. 结合 AJAX 技术实现数据与 DOM 的联动。

掌握 DOM 操作后，开发者将能更自由地控制网页内容，为用户提供更流畅、智能的交互体验。

最新发布

查看更多文章