异常教程

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 元素来完成这些任务。对于编程初学者而言，掌握 HTML DOM 元素的访问、修改和交互方式，是迈向进阶开发的关键一步。本文将从基础概念出发，结合实际案例，逐步解析如何高效操控 HTML DOM 元素，并深入探讨其在实际开发中的应用场景。

HTML DOM 元素的基本概念

1. 什么是 DOM？

DOM（Document Object Model）是浏览器提供的一个编程接口，它将 HTML 文档中的每个元素、属性和文本内容转化为对象，并通过树状结构组织起来。开发者可以通过 JavaScript 等编程语言操作这些对象，从而动态修改页面内容或响应用户行为。

形象比喻：
可以将 DOM 想象为一本“图书馆目录”。HTML 文档是书架上的书籍，而 DOM 就是按章节分类的索引卡片。通过这张卡片，你可以快速定位到任何一本书（元素），并查看其内容（属性和文本）。

2. HTML DOM 元素的层级结构

DOM 树由多个节点（Node）构成，其中最常见的节点类型是 元素节点（Element Node）。每个 HTML 标签（如 <div>, <p>）对应一个元素节点，而元素之间通过父子关系形成层级。例如：

<body>  
  <div class="container">  
    <h1>标题</h1>  
    <p>段落内容</p>  
  </div>  
</body>

在上述代码中，<div> 是 <body> 的子节点，而 <h1> 和 <p> 又是 <div> 的子节点。这种层级结构使得开发者可以通过路径或选择器精准定位目标元素。

访问和操作 DOM 元素的方法

1. 通过 ID 访问元素

最直接的方法是通过元素的 id 属性定位。每个 HTML 元素的 id 必须唯一，因此使用 document.getElementById() 可以快速获取目标元素。

示例代码：

<div id="myElement">Hello World</div>  

<script>  
  const element = document.getElementById("myElement");  
  console.log(element.innerHTML); // 输出：Hello World  
</script>

2. 通过类名或标签名选择元素

当需要操作多个同类型元素时，可以使用 document.getElementsByClassName() 或 document.getElementsByTagName()。

示例代码：

<p class="content">第一段</p>  
<p class="content">第二段</p>  

<script>  
  const paragraphs = document.getElementsByClassName("content");  
  for (let i = 0; i < paragraphs.length; i++) {  
    paragraphs[i].style.color = "red"; // 将所有段落文字设为红色  
  }  
</script>

3. 使用 CSS 选择器查询元素

现代浏览器支持通过 document.querySelector() 和 document.querySelectorAll() 以 CSS 语法选择元素，这种方法更为灵活。

示例代码：

<div class="container">  
  <button class="btn primary">提交</button>  
  <button class="btn secondary">取消</button>  
</div>  

<script>  
  // 选择第一个 .btn.primary 元素  
  const primaryButton = document.querySelector(".btn.primary");  
  primaryButton.addEventListener("click", () => {  
    alert("提交按钮被点击");  
  });  
</script>

修改 HTML DOM 元素的属性和内容

1. 内容操作：innerHTML 和 textContent

  • innerHTML：直接读取或设置元素内的 HTML 内容。
  • textContent：仅处理纯文本内容，不解析 HTML 标签。

示例代码：

<div id="demo"></div>  

<script>  
  const demoElement = document.getElementById("demo");  
  // 使用 innerHTML 插入 HTML  
  demoElement.innerHTML = "<strong>这是加粗文本</strong>";  
  // 使用 textContent 插入纯文本  
  demoElement.textContent = "这是普通文本"; // 会覆盖之前的 HTML 内容  
</script>

2. 属性操作：setAttribute() 和 getAttribute()

通过这些方法，可以动态修改元素的属性值。

示例代码：

<img id="image" src="default.jpg" alt="默认图片">  

<script>  
  const imageElement = document.getElementById("image");  
  // 修改图片路径  
  imageElement.setAttribute("src", "new-image.jpg");  
  // 获取 alt 属性值  
  console.log(imageElement.getAttribute("alt")); // 输出：默认图片  
</script>

3. 样式与类名操作

通过 style 属性可直接修改元素的 CSS 样式，而 classList 则用于操作元素的类名。

示例代码：

<div class="box">内容</div>  

<script>  
  const box = document.querySelector(".box");  
  // 动态设置背景颜色  
  box.style.backgroundColor = "lightblue";  
  // 添加或移除类名  
  box.classList.add("highlight"); // 添加 highlight 类  
  box.classList.remove("box"); // 移除 box 类  
</script>

事件监听与 DOM 元素交互

1. 基本事件监听

通过 addEventListener() 方法，可以为元素绑定特定事件（如点击、鼠标悬停等）。

示例代码：

<button id="myButton">点击我</button>  

<script>  
  const button = document.getElementById("myButton");  
  button.addEventListener("click", function() {  
    alert("按钮被点击了！");  
  });  
</script>

2. 事件委托与性能优化

当页面中存在大量同类元素时，直接为每个元素绑定事件可能导致性能问题。此时可采用事件委托，将事件监听器绑定到父元素上。

示例代码：

<ul id="list">  
  <li>项目1</li>  
  <li>项目2</li>  
  <li>项目3</li>  
</ul>  

<script>  
  const list = document.getElementById("list");  
  list.addEventListener("click", function(event) {  
    if (event.target.tagName === "LI") {  
      alert(`项目 ${event.target.textContent} 被点击`);  
    }  
  });  
</script>

动态创建与删除 DOM 元素

1. 创建新元素

通过 document.createElement() 可以动态生成元素，再通过 appendChild() 或 insertBefore() 插入到 DOM 树中。

示例代码：

<div id="container"></div>  

<script>  
  // 创建新 div  
  const newDiv = document.createElement("div");  
  newDiv.textContent = "这是新元素";  
  newDiv.style.backgroundColor = "yellow";  

  // 将新元素添加到容器中  
  const container = document.getElementById("container");  
  container.appendChild(newDiv);  
</script>

2. 删除元素

使用 removeChild() 方法删除指定元素，或直接通过 element.remove()（ES6+ 简化写法）。

示例代码：

<button id="removeButton">删除元素</button>  
<div id="target">要删除的元素</div>  

<script>  
  const removeButton = document.getElementById("removeButton");  
  removeButton.addEventListener("click", () => {  
    const target = document.getElementById("target");  
    target.remove(); // 或：target.parentNode.removeChild(target);  
  });  
</script>

进阶技巧与最佳实践

1. 操作 DOM 的最佳时机

避免在页面加载前操作 DOM，应使用 DOMContentLoaded 事件确保元素已加载完成。

document.addEventListener("DOMContentLoaded", function() {  
  // 安全操作 DOM 的代码  
});

2. 使用 data-* 属性存储自定义数据

通过 HTML5 的 data-* 属性，可以在元素中存储自定义数据，并通过 dataset 属性读取。

<button data-id="123" data-name="按钮1">点击</button>  

<script>  
  const button = document.querySelector("button");  
  console.log(button.dataset.id); // 输出：123  
</script>

3. 遍历 DOM 节点

使用 parentNode、childNodes、nextSibling 等属性可以遍历元素的上下文关系。

const element = document.querySelector(".example");  
console.log(element.parentNode); // 输出父元素  
console.log(element.nextSibling); // 输出下一个兄弟节点

结论：掌握 HTML DOM 元素的实战价值

通过本文的讲解，读者可以系统理解 HTML DOM 元素的核心概念、访问方法和操作技巧。从基础的元素查询到动态创建与删除，再到事件监听与性能优化，每个知识点都围绕实际开发场景展开。

对于初学者，建议从简单案例入手，逐步尝试修改元素样式、响应用户交互，并最终实现动态数据渲染。中级开发者则可深入学习事件委托、虚拟 DOM 等高级技术，进一步提升代码效率和用户体验。

记住，DOM 操作是前端开发的基础，而掌握它将为学习 React、Vue 等框架打下坚实的基础。动手实践是关键——尝试编写一个待办事项列表，或实现一个动态轮播图，你将发现 HTML DOM 元素的无限可能。

通过本文的结构化讲解和代码示例，读者能够循序渐进地掌握 HTML DOM 元素的使用方法，从而在实际项目中灵活应用这一核心技术。

最新发布

查看更多文章