DOM 实例（超详细）

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

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

DOM 的定义与作用

DOM（Document Object Model，文档对象模型） 是网页前端开发中连接 HTML、CSS 和 JavaScript 的桥梁。它将网页文档解析为树状结构的对象集合，允许开发者通过代码动态操作网页内容、样式和行为。简单来说，DOM 是网页的“骨架”，开发者通过 JavaScript 能够像操作积木一样，灵活地修改或增删网页元素。

DOM 的结构比喻

想象 DOM 是一棵“网页树”，每个 HTML 元素都是树上的节点（Node）。例如，<div> 是树枝，<p> 是树叶，而文本内容则是树叶上的叶脉。这种树状结构使得开发者可以逐级定位和操作元素。

关键节点类型解析

DOM 中的节点类型包括：

• 元素节点（Element Node）：对应 HTML 标签，如 <div>、<a>。
• 文本节点（Text Node）：存储元素内的文本内容，如 <p>你好</p> 中的“你好”。
• 属性节点（Attribute Node）：存储元素的属性值，如 <img src="image.jpg"> 的 src 属性。
• 注释节点（Comment Node）：存储 HTML 注释内容，如 <!-- 这是一个注释 -->。

通过表格对比节点类型，更直观理解其差异：

通过选择器定位节点

开发者需先找到目标元素，才能进行后续操作。常用的方法包括：

1. getElementById

通过元素的 id 属性直接获取单个元素：

// HTML 中的元素  
<div id="content">初始文本</div>  

// JavaScript 代码  
const contentElement = document.getElementById("content");  
console.log(contentElement.textContent); // 输出 "初始文本"  

2. querySelector 和 querySelectorAll

通过 CSS 选择器获取单个或多个元素：

// 获取所有类名为 "item" 的元素  
const items = document.querySelectorAll(".item");  
items.forEach(item => item.style.color = "red");  

// 获取父元素下的第一个子元素  
const firstChild = document.querySelector("#parent > .child");  

3. 通过父元素操作子节点

利用父元素的 children 或 childNodes 属性遍历子节点：

// 获取父元素的所有直接子元素  
const parent = document.getElementById("container");  
for (let i = 0; i < parent.children.length; i++) {  
  console.log(parent.children[i].tagName); // 输出子元素的标签名  
}  

动态修改节点内容与属性

1. 修改文本内容

通过 textContent 或 innerHTML 属性更新元素内容：

// 修改文本内容（推荐使用 textContent）  
const paragraph = document.getElementById("intro");  
paragraph.textContent = "新文本内容";  

// 直接插入 HTML 内容（需谨慎，可能引发 XSS 风险）  
paragraph.innerHTML = "<strong>加粗文本</strong>";  

2. 操作元素属性

使用 setAttribute 和 getAttribute 方法动态修改属性值：

// 为图片元素动态设置 src 属性  
const img = document.querySelector("img");  
img.setAttribute("src", "new-image.jpg");  
img.setAttribute("alt", "替换后的描述");  

// 获取并显示当前链接的 href  
const link = document.querySelector("a");  
console.log(link.getAttribute("href")); // 输出当前链接地址  

3. 添加和删除节点

通过 createElement 创建新节点，用 appendChild 或 insertBefore 插入，用 removeChild 删除：

// 创建新元素并添加到容器  
const newDiv = document.createElement("div");  
newDiv.textContent = "新添加的元素";  
document.body.appendChild(newDiv);  

// 删除指定元素  
const target = document.getElementById("remove-me");  
target.parentNode.removeChild(target);  

案例 1：动态生成导航栏

通过 DOM 操作，根据数据动态创建导航菜单：

// 假设的导航数据  
const navItems = [  
  { text: "首页", link: "/" },  
  { text: "关于", link: "/about" },  
  { text: "博客", link: "/blog" }  
];  

// 获取导航容器  
const navContainer = document.getElementById("nav");  

// 动态生成导航项  
navItems.forEach(item => {  
  const link = document.createElement("a");  
  link.href = item.link;  
  link.textContent = item.text;  

  const listItem = document.createElement("li");  
  listItem.appendChild(link);  
  navContainer.appendChild(listItem);  
});  

案例 2：表单验证与反馈

在用户提交表单时，通过 DOM 操作显示错误提示：

// 监听表单提交事件  
document.querySelector("form").addEventListener("submit", (event) => {  
  event.preventDefault(); // 阻止默认提交  

  // 获取输入值  
  const input = document.getElementById("username");  
  const value = input.value.trim();  

  // 验证逻辑  
  if (value.length < 3) {  
    const error = document.getElementById("error");  
    error.textContent = "用户名长度需至少 3 个字符";  
    input.style.borderColor = "red";  
  } else {  
    // 提交成功后重置表单  
    input.value = "";  
    error.textContent = "";  
  }  
});  

事件委托模式

直接为每个子元素绑定事件可能导致性能问题，使用事件委托可优化代码：

// 为父容器绑定事件，处理所有子元素的点击  
document.getElementById("gallery").addEventListener("click", (event) => {  
  if (event.target.classList.contains("thumbnail")) {  
    const imgSrc = event.target.dataset.src;  
    document.getElementById("preview").src = imgSrc;  
  }  
});  

动态样式与动画

通过修改 style 属性实现简单的动画效果：

// 使元素逐渐变大  
function growElement(element) {  
  let size = 100;  
  const interval = setInterval(() => {  
    element.style.width = `${size}%`;  
    element.style.height = `${size}%`;  
    size += 10;  
    if (size > 200) clearInterval(interval);  
  }, 50);  
}  

// 调用示例  
growElement(document.getElementById("box"));  

通过本文的学习，开发者应掌握 DOM 的核心概念、操作方法及实际应用场景。DOM 是构建交互式网页的基石，其灵活性和强大功能使得网页能够从静态文档转变为动态应用。

未来，随着 Web 开发技术的演进，DOM 的操作方式可能进一步简化（如通过现代框架封装），但理解其底层原理始终是开发者进阶的关键。建议读者通过实际项目练习，逐步掌握从基础到高级的 DOM 操作技巧，从而在开发中更高效地实现创意。

关键词布局回顾：本文通过案例和代码示例，深入解析了 DOM 实例在网页开发中的核心作用，帮助读者从理论到实践全面掌握这一关键技术。