首页
/ 正文

HTML DOM 教程（建议收藏）

更新时间: 2025-03-19 20:06:41

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

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

新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;

《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

前言

在网页开发领域，HTML DOM（Document Object Model，文档对象模型）是连接静态网页与动态交互的核心桥梁。无论是实现页面元素的动态更新、响应用户点击事件，还是构建复杂的前端交互逻辑，DOM 都是不可或缺的技术基础。对于编程初学者而言，理解 DOM 的核心概念和操作方法，能够快速提升网页开发能力；对于中级开发者，深入掌握 DOM 的高级技巧则有助于优化代码结构、提升用户体验。

本文将从 DOM 的基础概念出发，通过循序渐进的方式讲解其核心知识点，并结合实际案例和代码示例，帮助读者全面掌握如何通过 DOM 实现网页的动态控制。

一、HTML DOM 的基本概念与结构

1.1 什么是 DOM？

可以将 DOM 想象为一个“网页的树形图”。当浏览器加载 HTML 文件时，会自动将其解析为一个由节点（Node）组成的树状结构，每个节点代表 HTML 中的一个元素、属性或文本内容。例如，<div> 是一个元素节点，id="container" 是属性节点，而文本内容（如“Hello World”）是文本节点。

形象比喻：
如果把整个网页比作一座图书馆，DOM 就是这座图书馆的“目录索引”。开发者通过 DOM 可以快速定位到任何一本“书”（元素），并修改其内容或调整其位置。

1.2 DOM 的层级结构

DOM 的树形结构由以下核心部分组成：

根节点：代表整个 HTML 文档的 <html> 元素。
元素节点：对应 HTML 标签，如 <div>、<p>、<a>。
属性节点：存储元素的属性，如 <img src="image.jpg"> 中的 src 属性。
文本节点：元素内的纯文本内容，例如 <h1>标题</h1> 中的“标题”。

示例结构：

<html>  
  <head>  
    <title>网页标题</title>  
  </head>  
  <body>  
    <div id="container">  
      <p>这是一个段落。</p>  
    </div>  
  </body>  
</html>

1.3 DOM 与 BOM 的区别

DOM：专注于操作网页文档的结构和内容。
BOM（Browser Object Model）：处理浏览器窗口、导航、历史记录等与浏览器相关的功能。
两者常被一起使用，但需明确其职责范围。

二、DOM 的核心操作方法

2.1 通过 ID 访问元素

最直接的方式是通过元素的 id 属性获取节点。

代码示例：

// HTML 中的元素  
<div id="myElement">原始文本</div>  

// JavaScript 获取元素  
const element = document.getElementById("myElement");  
console.log(element.innerHTML); // 输出 "原始文本"

2.2 通过类名、标签名或 CSS 选择器获取元素

当需要操作多个元素时，可使用以下方法：

getElementsByClassName()：按类名获取元素集合。
getElementsByTagName()：按标签名获取元素集合。
querySelector() 和 querySelectorAll()：通过 CSS 选择器精准定位元素。

示例代码：

// 通过类名获取元素  
const items = document.getElementsByClassName("list-item");  

// 通过 CSS 选择器获取元素  
const firstParagraph = document.querySelector("p:first-child");

2.3 修改元素内容与属性

通过 DOM，可以动态修改元素的内容、样式或属性值。

案例：动态更新文本内容

// 修改 innerHTML 属性  
element.innerHTML = "新文本";  

// 修改文本内容（推荐使用 textContent）  
element.textContent = "新文本（无 HTML 标签）";

修改属性值：

// 设置元素的 href 属性  
const link = document.getElementById("myLink");  
link.href = "https://example.com";

三、DOM 节点的增删改查

3.1 创建与插入节点

使用 createElement() 创建新节点，并通过 appendChild() 或 insertBefore() 插入到目标位置。

代码示例：

// 创建新元素  
const newDiv = document.createElement("div");  
newDiv.textContent = "新插入的元素";  

// 插入到指定位置  
const container = document.getElementById("container");  
container.appendChild(newDiv); // 追加到末尾

3.2 删除节点

通过 removeChild() 方法删除节点，但需先获取其父节点。

示例：

// 获取要删除的元素及其父节点  
const elementToRemove = document.getElementById("oldElement");  
const parent = elementToRemove.parentNode;  

// 删除操作  
parent.removeChild(elementToRemove);

3.3 替换与克隆节点

replaceChild()：用新节点替换旧节点。
cloneNode()：复制现有节点（需指定是否复制子节点）。

示例：克隆并替换元素

const original = document.getElementById("original");  
const clone = original.cloneNode(true); // true 表示复制子节点  

original.parentNode.replaceChild(clone, original);

四、DOM 事件与交互

4.1 事件监听器基础

通过 addEventListener() 绑定事件，例如点击、鼠标悬停或表单输入。

示例：点击事件

const button = document.getElementById("myButton");  

button.addEventListener("click", function() {  
  alert("按钮被点击了！");  
});

4.2 常见事件类型与应用

事件类型	触发条件	典型用途
`click`	用户点击元素	按钮触发操作
`mouseover`	鼠标进入元素范围	悬停显示提示信息
`keydown`	用户按下键盘按键	输入实时验证
`submit`	表单提交时触发	阻止默认提交并处理数据

4.3 阻止默认行为与事件冒泡

通过 event.preventDefault() 可阻止默认行为（如跳转链接），event.stopPropagation() 可阻止事件冒泡。

案例：阻止表单提交

document.querySelector("form").addEventListener("submit", function(event) {  
  event.preventDefault(); // 阻止页面刷新  
  console.log("表单已提交，但未跳转");  
});

五、实战案例：动态生成 Todo 列表

5.1 需求分析

实现一个简单的 Todo 应用：用户输入任务后，点击按钮将任务添加到列表中，并支持删除单个任务。

5.2 HTML 结构

<div id="todo-app">  
  <input type="text" id="task-input" placeholder="输入任务">  
  <button id="add-btn">添加任务</button>  
  <ul id="task-list"></ul>  
</div>

5.3 JavaScript 实现

// 获取关键元素  
const input = document.getElementById("task-input");  
const addButton = document.getElementById("add-btn");  
const taskList = document.getElementById("task-list");  

// 添加任务函数  
function addTask() {  
  const taskText = input.value.trim();  
  if (taskText === "") return;  

  // 创建新任务项  
  const li = document.createElement("li");  
  li.textContent = taskText;  

  // 添加删除按钮  
  const deleteBtn = document.createElement("button");  
  deleteBtn.textContent = "删除";  
  deleteBtn.addEventListener("click", function() {  
    li.remove(); // 直接移除父节点中的当前元素  
  });  

  li.appendChild(deleteBtn);  
  taskList.appendChild(li);  
  input.value = ""; // 清空输入框  
}  

// 绑定点击事件  
addButton.addEventListener("click", addTask);  

// 可选：通过回车键触发添加  
input.addEventListener("keypress", function(event) {  
  if (event.key === "Enter") addTask();  
});

5.4 功能扩展建议

添加任务完成状态（复选框）
通过 localStorage 保存任务数据
根据优先级为任务添加颜色

结论

HTML DOM 是网页开发中不可或缺的工具，它赋予了开发者动态控制网页内容、样式和行为的能力。通过本文的讲解，读者应已掌握从基础操作到复杂交互的实现方法。对于初学者，建议从简单案例入手（如修改文本或绑定点击事件），逐步尝试更复杂的项目；中级开发者则可结合 CSS 和 JavaScript 进一步探索动画、表单验证等高级功能。

掌握 DOM 的核心原理与最佳实践，将为后续学习框架（如 React 或 Vue）打下坚实的基础。希望本文能成为您深入理解 HTML DOM 的起点，为您的开发之路提供持续助力！

HTML DOM 教程（建议收藏）

前言

一、HTML DOM 的基本概念与结构

1.1 什么是 DOM？

1.2 DOM 的层级结构

1.3 DOM 与 BOM 的区别

二、DOM 的核心操作方法

2.1 通过 ID 访问元素

2.2 通过类名、标签名或 CSS 选择器获取元素

2.3 修改元素内容与属性

三、DOM 节点的增删改查

3.1 创建与插入节点

3.2 删除节点

3.3 替换与克隆节点

四、DOM 事件与交互

4.1 事件监听器基础

4.2 常见事件类型与应用

4.3 阻止默认行为与事件冒泡

五、实战案例：动态生成 Todo 列表

5.1 需求分析

5.2 HTML 结构

5.3 JavaScript 实现

5.4 功能扩展建议

结论

最新发布

Rider 2025.1.5 最新激活码，破解版安装教程（亲测有效~）

RubyMine 2025.2 最新激活码,破解版安装教程（亲测有效~）

DataGrip 2025.2.1 最新激活码,破解版安装教程（亲测至2099年~）

Clion 2025.2 最新激活码,破解版安装教程（亲测至2099年~）

GoLand 2025.2 最新激活码,破解版安装教程（亲测至2099年~）

PhpStorm 2025.2 最新激活码,破解版安装教程（亲测有效~）

Webstorm 2025.2 最新激活码,破解版安装教程（亲测至2099年~）

Pycharm 2025.2 最新激活码,破解版安装教程（亲测至2099年~）

IDEA 2025.2 最新激活码,破解版安装教程（亲测至2099年~）

DataGrip 2025.2 最新激活码,破解版安装教程（亲测至2099年~）