首页
/ 正文

HTML DOM 修改（建议收藏）

更新时间: 2025-04-07 13:37:25

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习，欢迎点击围观

前言

在网页开发中，HTML DOM（文档对象模型）是连接静态页面与动态交互的桥梁。通过修改 DOM，开发者可以实时更新页面内容、响应用户操作，甚至构建复杂的交互逻辑。无论是动态加载数据、表单验证，还是实现动画效果，掌握 HTML DOM 修改 都是不可或缺的技能。本文将从基础概念到实战案例，逐步拆解这一主题，帮助读者理解其核心原理并提升实践能力。

HTML DOM 的基础概念

什么是 DOM？

DOM 是一种 树形结构 的编程接口，它将 HTML 文档表示为节点的集合。每个 HTML 元素、文本、属性甚至注释都对应一个节点，形成层级关系。想象一棵大树：根节点是 <html>，分支是 <body>、<div> 等元素，叶子节点可能是文本或按钮。通过 DOM，开发者可以像修剪树枝一样，动态增删或修改这些节点。

DOM 的核心节点类型

以下表格简要列出常见的节点类型及其用途：

节点类型	描述
ElementNode	HTML 元素（如 `<div>`、`<p>`），是最常用的节点类型。
TextNode	文本内容，例如段落中的文字或按钮内的文字。
CommentNode	注释内容（如 `<!-- 这是一个注释 -->`），通常用于开发调试。
DocumentNode	整个 HTML 文档的根节点，包含所有其他节点。

修改 DOM 的核心方法

创建新节点

使用 document.createElement() 或 document.createTextNode() 可以动态生成节点。例如，添加一个 <li> 列表项到 <ul> 列表中：

// 创建新列表项元素  
const newItem = document.createElement("li");  
// 创建文本节点  
const textNode = document.createTextNode("新任务");  
// 将文本添加到列表项中  
newItem.appendChild(textNode);  
// 将列表项添加到 ul 容器  
document.getElementById("taskList").appendChild(newItem);

比喻：这就像在树上嫁接新枝条——先“种植”新枝（createElement），再“嫁接”叶子（appendChild），最后将整枝插入树干（父节点）。

修改现有节点

通过访问节点的属性或方法，可以更新其内容或样式。例如，动态改变按钮的文本和颜色：

const btn = document.getElementById("myButton");  
btn.textContent = "点击后修改成功！"; // 修改文本内容  
btn.style.backgroundColor = "#4CAF50"; // 修改背景颜色

删除节点

使用 removeChild() 可移除指定节点，或通过 remove() 方法直接删除自身：

// 方法一：通过父节点移除  
const parent = document.getElementById("parentDiv");  
parent.removeChild(parent.querySelector(".target"));  

// 方法二：直接删除节点  
document.querySelector(".target").remove();

替换节点

replaceChild() 可用新节点替换旧节点，例如将按钮替换为文字：

const oldBtn = document.getElementById("oldButton");  
const newSpan = document.createElement("span");  
newSpan.textContent = "已替换为文字！";  
oldBtn.parentNode.replaceChild(newSpan, oldBtn);

动态内容加载与交互

根据用户输入更新页面

通过监听输入事件（如 input），可以实时修改 DOM。例如，输入用户名后显示欢迎信息：

<input type="text" id="usernameInput" placeholder="输入用户名">  
<div id="welcomeMessage"></div>  

<script>  
document.getElementById("usernameInput").addEventListener("input", function() {  
  const username = this.value;  
  document.getElementById("welcomeMessage").textContent = `欢迎，${username}！`;  
});  
</script>

场景说明：当用户在输入框中输入内容时，input 事件触发函数，动态更新 welcomeMessage 的文本内容，实现无刷新的实时反馈。

响应式布局与动态元素

通过 JavaScript 动态生成元素，可以构建响应式界面。例如，根据屏幕宽度添加不同样式的按钮：

function adjustLayout() {  
  const width = window.innerWidth;  
  const btnContainer = document.getElementById("btnContainer");  

  if (width < 768) {  
    // 移除现有按钮  
    btnContainer.innerHTML = "";  
    // 创建并添加小按钮  
    const smallBtn = document.createElement("button");  
    smallBtn.textContent = "移动端按钮";  
    btnContainer.appendChild(smallBtn);  
  } else {  
    // 添加桌面端按钮  
    const desktopBtn = document.createElement("button");  
    desktopBtn.textContent = "桌面端按钮";  
    btnContainer.appendChild(desktopBtn);  
  }  
}  

// 页面加载和窗口调整时触发  
window.addEventListener("resize", adjustLayout);  
window.addEventListener("load", adjustLayout);

事件驱动的 DOM 修改

绑定事件与动态交互

通过 addEventListener()，可以为元素绑定事件并触发 DOM 修改。例如，点击按钮切换主题：

<button id="toggleTheme">切换主题</button>  

<script>  
document.getElementById("toggleTheme").addEventListener("click", function() {  
  const body = document.body;  
  if (body.classList.contains("dark")) {  
    body.classList.remove("dark");  
    body.classList.add("light");  
  } else {  
    body.classList.remove("light");  
    body.classList.add("dark");  
  }  
});  
</script>

动态表单验证

在提交表单前，通过修改 DOM 提供实时反馈：

<form id="myForm">  
  <input type="email" id="emailInput" required>  
  <div id="validationMessage"></div>  
  <button type="submit">提交</button>  
</form>  

<script>  
document.getElementById("myForm").addEventListener("submit", function(e) {  
  e.preventDefault(); // 阻止默认提交  
  const email = document.getElementById("emailInput").value;  
  const messageDiv = document.getElementById("validationMessage");  

  if (!email.includes("@")) {  
    messageDiv.textContent = "邮箱格式错误！";  
    messageDiv.style.color = "red";  
  } else {  
    messageDiv.textContent = "验证通过！";  
    messageDiv.style.color = "green";  
  }  
});  
</script>

常见问题与最佳实践

性能优化

频繁修改 DOM 可能导致页面卡顿，因为每次操作都会触发重排（Reflow）或重绘（Repaint）。以下方法可提升性能：

使用文档碎片（Document Fragment）：将多个节点操作集中到一个临时容器中，最后一次性插入 DOM。

const fragment = document.createDocumentFragment();  
for (let i = 0; i < 100; i++) {  
  const li = document.createElement("li");  
  fragment.appendChild(li);  
}  
document.getElementById("list").appendChild(fragment); // 一次性插入

避免直接操作样式字符串：使用 classList 或 style 属性的 setter 方法。
批量操作：将多个修改操作合并到一个函数中执行。

避免常见错误

节点未找到：确保通过 getElementById() 或 querySelector() 获取的节点存在。

const element = document.getElementById("nonExistentId");  
if (element) {  
  // 安全操作  
} else {  
  console.error("节点不存在！");  
}

事件冒泡与捕获：通过 stopPropagation() 防止事件影响父级元素。

结论

HTML DOM 修改 是构建动态网页的核心技术。从基础的节点操作到高级的性能优化，开发者需要理解 DOM 的树形结构，并掌握创建、修改、删除节点的技巧。通过结合事件监听、响应式设计和性能优化策略，可以实现流畅且功能丰富的用户界面。

随着前端框架（如 React、Vue）的普及，DOM 操作逐渐被抽象化，但理解底层原理对优化代码性能、排查复杂问题依然至关重要。希望本文能帮助读者建立扎实的 DOM 操作基础，并在实际项目中灵活运用这些技术。

HTML DOM 修改（建议收藏）

前言

HTML DOM 的基础概念

什么是 DOM？

DOM 的核心节点类型

修改 DOM 的核心方法

创建新节点

修改现有节点

删除节点

替换节点

动态内容加载与交互

根据用户输入更新页面

响应式布局与动态元素

事件驱动的 DOM 修改

绑定事件与动态交互

动态表单验证

常见问题与最佳实践

性能优化

避免常见错误

结论

最新发布

PHP mysqli_commit() 函数（长文解析）

PHP mysqli_connect_errno() 函数（保姆级教程）

PHP mysqli_connect_error() 函数（手把手讲解）

PHP mysqli_connect() 函数（保姆级教程）

PHP mysqli_data_seek() 函数（超详细）

PHP mysqli_debug() 函数（建议收藏）

PHP mysqli_dump_debug_info() 函数（一文讲透）

PHP mysqli_errno() 函数（手把手讲解）

PHP mysqli_error_list() 函数（千字长文）

PHP mysqli_error() 函数（长文讲解）