异常教程

HTML 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+ 小伙伴加入学习 ，欢迎点击围观

什么是 HTML DOM？

在网页开发的世界里，HTML DOM（Document Object Model）是一个常被提及的核心概念。它如同一座桥梁，连接了静态的网页内容与动态的程序逻辑。简单来说，HTML DOM 是一种编程接口，允许开发者通过 JavaScript 等语言访问和操作网页中的每一个元素。

想象你走进一个图书馆，DOM 就像这座图书馆的“目录系统”。每本书（网页元素）都有明确的位置和属性（如标题、作者、页数），而 DOM 提供了一套规则，让你能快速找到任意一本书，甚至修改它的内容或添加新的书籍。

HTML DOM 的结构：树形模型与节点

树形结构的比喻

DOM 将网页内容组织成一棵树状结构。树的根节点是 <html>，它的子节点包括 <head> 和 <body>，而 <body> 下又包含段落、标题、图片等元素，每个元素都可以进一步拆分。这种层级关系，就像家族谱系中的父子关系：每个节点都有父节点和子节点，彼此通过“父子”或“兄弟”关系连接。

核心概念：节点类型

DOM 中的每个元素、属性、文本甚至注释都被视为一个“节点”。常见的节点类型包括：

  • 元素节点：如 <div>、<p> 等 HTML 标签。
  • 属性节点：如 <img src="..." alt="..." 中的 src 和 alt。
  • 文本节点：标签内的文字内容，例如 <p>这是一个段落</p> 中的“这是一个段落”。

表格：节点类型示例

节点类型示例代码描述
元素节点<div class="container">对应 HTML 标签
属性节点class="container"元素的属性值
文本节点这是一个段落标签内的纯文本内容

如何通过 DOM 操作网页元素？

获取元素：定位目标节点

要操作网页元素，首先需要找到它。常见的获取方法包括：

1. 通过 ID 获取

// HTML 中的元素： <div id="myDiv">Hello World</div>
const myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML); // 输出 "Hello World"

这里 document.getElementById 就像在图书馆目录中直接输入书号，快速定位到目标元素。

2. 通过类名获取

// HTML 中的元素： <p class="text">段落内容</p>
const elements = document.getElementsByClassName("text");
console.log(elements[0].textContent); // 输出 "段落内容"

getElementsByClassName 返回一个类数组对象，需要通过索引访问具体元素。

3. 通过 CSS 选择器获取

// 使用更灵活的 CSS 语法  
const element = document.querySelector("#myDiv"); // 获取 ID 为 myDiv 的元素  
const elements = document.querySelectorAll(".text"); // 获取所有 class 为 text 的元素

querySelector 和 querySelectorAll 类似浏览器的开发者工具，能通过 CSS 选择器精准定位目标。

修改元素内容与属性

获取到元素后，可以通过以下方式动态修改网页：

修改文本内容

// 修改 <p>标签的文本  
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "新的文本内容"; // 或使用 innerHTML（支持 HTML 标签）

修改元素属性

// 修改图片的 src 属性  
const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg"); // 设置新路径  
console.log(image.getAttribute("alt")); // 读取 alt 属性的值

添加或删除元素

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

// 删除元素  
const elementToRemove = document.getElementById("oldDiv");  
elementToRemove.remove(); // 直接移除元素

DOM 事件：让网页“动起来”

事件驱动的交互逻辑

DOM 事件是用户与网页交互的触发器。例如，点击按钮、鼠标悬停、输入文本等操作都会触发特定事件。开发者可以通过监听事件并编写回调函数，让网页产生动态响应。

基本事件监听示例

// 给按钮绑定点击事件  
const button = document.getElementById("myButton");  
button.addEventListener("click", function() {  
  alert("按钮被点击了！");  
});

常见事件类型与应用

事件类型触发场景常见用途
click鼠标点击按钮触发操作
mouseover鼠标悬停显示隐藏信息
input输入框内容变化实时验证表单
load页面或资源加载完成初始化数据或样式

表格：事件处理流程示例

步骤描述代码示例
1. 获取元素定位要监听的元素const element = document.querySelector(...)
2. 添加监听绑定事件与回调函数element.addEventListener("事件名", 回调函数)
3. 执行逻辑在回调函数中编写具体操作function() { /* 代码 */ }

实战案例：动态生成导航栏

场景描述

假设需要根据用户输入动态生成一个导航栏，包含多个链接项。

HTML 结构

<input type="text" id="navInput" placeholder="输入链接名称">  
<button id="addLink">添加链接</button>  
<ul id="navigation"></ul>

JavaScript 实现

document.getElementById("addLink").addEventListener("click", function() {  
  // 1. 获取输入值  
  const input = document.getElementById("navInput");  
  const linkText = input.value.trim();  
  if (!linkText) return;  

  // 2. 创建新元素  
  const newLink = document.createElement("li");  
  const linkElement = document.createElement("a");  
  linkElement.href = "#";  
  linkElement.textContent = linkText;  

  // 3. 组合元素并添加到页面  
  newLink.appendChild(linkElement);  
  document.getElementById("navigation").appendChild(newLink);  

  // 4. 清空输入框  
  input.value = "";  
});

运行效果

每当用户输入文本并点击“添加链接”按钮时，导航栏会动态添加一个新链接项。这一案例展示了 DOM 操作的完整流程：获取元素 → 创建节点 → 组合结构 → 更新页面。

进阶技巧：DOM 操作的性能优化

避免频繁操作 DOM

直接修改 DOM 会触发浏览器的重排（Reflow）和重绘（Repaint），频繁操作可能导致页面卡顿。例如，以下代码会多次操作 DOM：

for (let i = 0; i < 1000; i++) {  
  document.body.innerHTML += `<div>${i}</div>`; // 每次循环都修改 DOM  
}

优化方法：将所有新内容缓存到字符串中，最后一次性更新：

let html = "";  
for (let i = 0; i < 1000; i++) {  
  html += `<div>${i}</div>`;  
}  
document.body.innerHTML = html; // 一次操作完成

使用 DocumentFragment 提升性能

DocumentFragment 是一个轻量级的临时容器，可以批量操作后再一次性将内容插入到 DOM 中：

const fragment = document.createDocumentFragment();  
for (let i = 0; i < 1000; i++) {  
  const div = document.createElement("div");  
  div.textContent = i;  
  fragment.appendChild(div); // 先添加到 Fragment  
}  
document.body.appendChild(fragment); // 一次性插入

结论：DOM 是网页开发的基石

通过本文的讲解，我们了解到 HTML DOM 是连接静态 HTML 与动态 JavaScript 的桥梁。它不仅提供了访问和操作网页元素的接口，还通过事件机制实现了用户交互的反馈。无论是修改内容、动态生成结构，还是优化性能，DOM 都是开发者必须掌握的核心技能。

对于初学者，建议从基础操作开始练习，例如通过修改文本、属性或简单事件响应来熟悉 API；中级开发者则可以探索更复杂的场景，如结合 AJAX 动态加载内容或优化大规模 DOM 操作。记住，实践是掌握 DOM 的最佳途径——尝试在自己的项目中实现类似导航栏的案例，逐步提升对网页控制的灵活性！

提示：DOM 的学习需要结合代码实践，建议使用浏览器开发者工具（如 Chrome DevTools）实时查看和调试节点结构，这将极大提升学习效率。

最新发布

查看更多文章