异常教程

HTML DOM 元素对象（千字长文）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 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 元素对象 正是实现这一目标的关键工具。它允许开发者通过代码直接访问、修改页面中的每一个 HTML 元素，从简单的文本更新到复杂的交互逻辑，都能通过元素对象的属性和方法实现。无论是刚入门的编程新手，还是希望提升 DOM 操作能力的中级开发者，理解这一概念都将为你的前端开发之路打下坚实的基础。

一、HTML DOM 元素对象的基础概念

1.1 什么是 DOM？

DOM（Document Object Model，文档对象模型） 是浏览器为网页创建的一个树状结构，它将 HTML 文档中的每个元素、属性和文本内容都转换为可编程的对象。这些对象被称为 DOM 节点，而 HTML DOM 元素对象 则是这些节点中最核心的一类。

形象比喻：
可以把 DOM 想象成一棵“网页树”，每个 HTML 标签（如 <div>、<p>）都是这棵树上的节点。而 元素对象 就是这些节点的“化身”，开发者可以通过代码像操作树的枝叶一样，对它们进行增删改查。

1.2 元素对象的组成要素

每个 HTML DOM 元素对象 包含三部分关键内容：

  1. 属性（Properties）：如 id、className、innerHTML 等，用于描述元素的当前状态。
  2. 方法（Methods）：如 addEventListener()、appendChild()，用于执行特定操作。
  3. 事件（Events）：如 click、mouseover，当用户或程序触发时会自动执行关联的函数。

二、如何获取 HTML DOM 元素对象

要操作元素对象，首先需要通过 JavaScript 代码找到目标元素。以下是几种常用的方法：

2.1 通过 getElementById()

这是最直接的方法，要求元素必须有 id 属性。

// HTML 中的元素
<div id="myElement">Hello World</div>

// JavaScript 中获取元素
const element = document.getElementById("myElement");
console.log(element.innerHTML); // 输出 "Hello World"

2.2 通过 querySelector() 和 querySelectorAll()

这两个方法支持 CSS 选择器语法，灵活性更高。

// 获取第一个 class 为 "content" 的元素
const firstContent = document.querySelector(".content");

// 获取所有 class 为 "item" 的元素（返回 NodeList）
const items = document.querySelectorAll(".item");

2.3 通过 getElementsByClassName() 和 getElementsByTagName()

适用于按类名或标签名批量获取元素。

// 获取所有 <button> 元素
const buttons = document.getElementsByTagName("button");

// 获取所有 class 为 "active" 的元素
const activeItems = document.getElementsByClassName("active");

对比表格：
| 方法名 | 返回值类型 | 适用场景 |
|---------------------------------|------------------|-----------------------------------|
| getElementById() | 单个元素 | 精确获取有唯一 id 的元素 |
| querySelector() | 单个元素 | 使用 CSS 选择器获取第一个匹配项 |
| querySelectorAll() | NodeList | 获取所有匹配的元素集合 |
| getElementsByClassName() | HTMLCollection | 按类名批量获取元素 |
| getElementsByTagName() | HTMLCollection | 按标签名批量获取元素 |

三、操作元素对象的属性与样式

3.1 修改元素内容

通过 innerHTML 或 textContent 属性可以直接修改元素的文本或 HTML 内容。

// 修改文本内容
element.textContent = "New Text"; // 仅修改纯文本

// 插入 HTML 内容（注意安全风险）
element.innerHTML = "<strong>加粗文本</strong>";

3.2 操作元素属性

使用 setAttribute() 或直接访问属性名修改元素属性。

// 修改 class 属性
element.className = "new-class"; // 或 element.classList.add("new-class");

// 添加自定义属性
element.setAttribute("data-user", "Alice");

3.3 动态控制样式

通过 style 属性直接操作元素的 CSS 样式。

// 改变背景颜色和字体大小
element.style.backgroundColor = "lightblue";
element.style.fontSize = "20px";

案例示例：

<button id="change-btn">点击变色</button>
<script>
  const btn = document.getElementById("change-btn");
  btn.addEventListener("click", function() {
    btn.style.color = "red";
    btn.textContent = "已变色！";
  });
</script>

四、事件与元素对象的互动

4.1 事件监听与触发

通过 addEventListener() 方法为元素对象绑定事件处理函数。

// 监听点击事件
element.addEventListener("click", function(event) {
  console.log("元素被点击了！", event);
});

4.2 事件冒泡与捕获

事件默认会从最内层元素向上传播到根节点（冒泡阶段）。可以通过 stopPropagation() 阻止这一行为。

// 子元素阻止事件冒泡
childElement.addEventListener("click", function(event) {
  event.stopPropagation();
});

4.3 实际案例：表单验证

<form id="myForm">
  <input type="text" id="username" required>
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById("myForm");
  form.addEventListener("submit", function(event) {
    const username = document.getElementById("username");
    if (username.value.trim() === "") {
      event.preventDefault(); // 阻止表单提交
      username.style.border = "2px solid red";
    }
  });
</script>

五、进阶技巧与常见问题

5.1 安全操作 DOM

  • 避免直接修改 innerHTML：可能引入 XSS（跨站脚本攻击）风险。
  • 使用 classList 替代 className：更方便地操作类名，例如 classList.toggle("active")。

5.2 性能优化

  • 减少 DOM 操作频率：将多次修改合并为一次，例如使用 documentFragment。
  • 避免直接操作样式字符串：使用 CSS 类来管理样式，而非直接修改 style 属性。

5.3 常见错误与解决方法

  • 元素未找到：检查选择器语法是否正确，确保元素已加载后再执行脚本（例如将脚本放在 DOMContentLoaded 事件中）。
  • 属性名的大小写问题：JavaScript 中的属性名需与 HTML 属性名对应，如 className 对应 class。

结论

掌握 HTML DOM 元素对象 的操作方法，是实现动态网页交互的基石。从基础的元素获取、属性修改，到复杂的事件处理和性能优化，开发者可以通过系统的学习逐步提升能力。建议读者通过实际项目练习，例如制作可交互的导航栏、动态数据表格，或响应式表单验证，以巩固对这一概念的理解。随着经验的积累，你将能够更加灵活地运用 DOM，创造出功能丰富且用户体验优秀的网页应用。

（字数统计：约 1800 字）

最新发布

查看更多文章