异常教程

HTML DOM Object 对象（一文讲透）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 Object 对象？

在网页开发中，HTML DOM Object 对象如同一座桥梁，连接着静态的网页内容与动态的交互逻辑。想象一座摩天大楼，HTML 是它的钢筋骨架，CSS 是粉饰的外墙，而 DOM（Document Object Model）则是这座建筑的“神经系统”——它让开发者能够通过代码感知和操控网页的每一个“细胞”。对于编程初学者而言，理解 DOM 的工作原理，就像是掌握了一把打开现代网页交互之门的钥匙；而对于中级开发者，深入探索 DOM 对象的高级用法，则能显著提升代码的效率与优雅程度。

本文将通过循序渐进的讲解，结合生活化的比喻和实战代码案例，帮助读者系统掌握 HTML DOM Object 对象的核心知识，并解决常见开发中的痛点问题。

一、HTML DOM Object 对象的核心概念

1.1 DOM 的层级结构：网页的“树形家族”

DOM 的本质是一个树状结构的对象集合，每个节点代表网页中的一个元素、属性或文本。我们可以将 DOM 比作一个家族族谱：

  • 根节点（document）：家族族谱的起点，对应网页的 <html> 标签。
  • 元素节点（如 div、p、img）：家族中的各个成员，每个成员都有自己的“身份证”（属性）和“关系网”（父子/兄弟节点）。
  • 文本节点：成员的“发言内容”，例如 <p>你好</p> 中的“你好”文字。
// 通过 console.log 查看 DOM 树结构
console.log(document); // 输出整个文档对象
console.log(document.body); // 输出 body 元素节点
console.log(document.getElementById('myButton').textContent); // 输出按钮内的文本内容

1.2 三大核心操作维度

DOM 操作主要围绕以下三个维度展开：

维度描述对应方法示例
访问节点定位网页中的特定元素document.getElementById()
修改内容动态改变元素的文本、属性或样式element.innerHTML = '新内容'
操作结构增加、删除或移动 DOM 节点parent.appendChild(newNode)

二、DOM 对象的核心操作实战

2.1 访问节点的 5 种常用方法

案例场景：用户点击按钮时获取输入框内容

<!-- HTML 结构 -->
<input type="text" id="usernameInput">
<button onclick="showUsername()">提交</button>

<script>
function showUsername() {
  // 方法 1：通过 id 直接获取
  const inputElement = document.getElementById('usernameInput');
  alert(`欢迎，${inputElement.value}！`);
}
</script>

其他常用方法对比

方法适用场景返回值类型
document.querySelector('#id')需要 CSS 选择器灵活性时单个元素
document.querySelectorAll('.class')获取多个同类型元素（如所有按钮）NodeList 列表
parentElement.childNodes遍历子节点时包含文本节点的集合

2.2 修改内容与属性的 4 种技巧

案例：动态更新页面标题颜色

// 方法 1：直接操作 style 属性
document.querySelector('h1').style.color = 'red';

// 方法 2：通过 class 管理样式（推荐）
document.querySelector('h1').classList.add('highlight');
// 对应 CSS：.highlight { color: red; transition: color 0.3s; }

// 方法 3：修改元素文本内容
document.getElementById('status').textContent = '加载完成';

// 方法 4：更新属性值（如图片地址）
document.querySelector('img').src = 'new-image.jpg';

2.3 DOM 结构操作的进阶技巧

案例：动态生成购物车列表

// 创建新元素
const newItem = document.createElement('div');
newItem.className = 'cart-item';
newItem.innerHTML = '<span>商品名称</span><button>删除</button>';

// 插入到指定位置
document.querySelector('.cart-list').appendChild(newItem);

// 移除元素
document.querySelector('.remove-btn').addEventListener('click', () => {
  newItem.remove();
});

三、DOM 事件处理机制解析

3.1 事件流与事件对象：一场“消息传递”的游戏

想象 DOM 节点之间传递“消息包裹”：当用户点击按钮时，事件会依次经过：

  1. 捕获阶段：从 document 根节点向下传递
  2. 目标阶段：到达实际触发事件的元素
  3. 冒泡阶段：从目标元素回溯到根节点
document.addEventListener('click', (event) => {
  console.log('冒泡阶段：', event.target.tagName);
}, { capture: false }); // 默认冒泡阶段

document.addEventListener('click', (event) => {
  console.log('捕获阶段：', event.target.tagName);
}, { capture: true });

3.2 阻止默认行为与事件委托

案例：阻止表单提交刷新页面

<form onsubmit="return false;">
  <!-- 表单内容 -->
</form>

<script>
// 更专业的写法
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止默认提交行为
  // 执行自定义逻辑
});
</script>

事件委托的优化技巧

// 监听父容器事件，处理子元素点击
document.querySelector('.list-container').addEventListener('click', (event) => {
  if (event.target.matches('.list-item')) {
    console.log(`点击了第 ${event.target.dataset.index} 项`);
  }
});

四、常见问题与最佳实践

4.1 性能优化：避免“DOM 操作的黑洞”

问题场景：频繁操作 DOM 导致卡顿

// 低效写法：每次循环都修改 DOM
for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += `<div>${i}</div>`; // 每次循环都重绘页面
}

// 高效写法：使用文档碎片（Document Fragment）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const item = document.createElement('div');
  item.textContent = i;
  fragment.appendChild(item);
}
document.body.appendChild(fragment); // 一次性渲染

4.2 跨浏览器兼容性处理

历史遗留问题：IE 浏览器的“怪癖”

// 获取元素位置的兼容写法
function getBoundingClientRect(element) {
  if (element.getBoundingClientRect) {
    return element.getBoundingClientRect();
  } else {
    // 针对 IE8 及以下的替代方案
    return {
      top: element.offsetTop,
      left: element.offsetLeft
    };
  }
}

4.3 安全性与防抖策略

防止 XSS 攻击的编码实践

// 安全地插入用户输入内容
function safeAppendText(element, userContent) {
  // 使用 textContent 而非 innerHTML
  element.textContent = userContent;
}

// 防抖优化高频事件（如滚动）
let timeout;
window.addEventListener('scroll', (event) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // 执行滚动处理逻辑
  }, 200);
});

五、HTML DOM Object 对象的进阶应用

5.1 响应式布局的动态适配

// 根据窗口大小调整元素样式
function resizeHandler() {
  const width = window.innerWidth;
  document.body.style.backgroundColor = 
    width < 768 ? '#f0f0f0' : '#ffffff';
}
window.addEventListener('resize', resizeHandler);

// 初始化执行
resizeHandler();

5.2 与现代 API 的结合使用

案例：使用 Intersection Observer 监测元素可见性

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口时加载图片
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

// 监听延迟加载的图片元素
document.querySelectorAll('img.lazy').forEach(img => {
  observer.observe(img);
});

结论：掌握 DOM 的意义与未来方向

HTML DOM Object 对象不仅是网页开发的基础工具，更是理解浏览器工作原理的关键入口。通过本文的学习，读者应能：

  1. 构建清晰的 DOM 树状结构认知
  2. 熟练运用核心操作方法与事件机制
  3. 规避常见性能与兼容性陷阱
  4. 结合现代 API 实现高级功能

在前端技术快速发展的今天，DOM 相关技术仍在持续演进。例如 Web Components 标准的成熟，Shadow DOM 的广泛应用，都为开发者提供了更强大的构建模块。建议读者通过官方 MDN 文档和开源项目实践，持续深化对 HTML DOM Object 对象的理解，从而在构建复杂交互应用时得心应手。

推荐阅读：探索《DOM 性能优化指南》或尝试用 React/Vue 等框架理解虚拟 DOM 的工作原理，这些进阶内容将帮助你站在更高视角审视传统 DOM 开发。

最新发布

查看更多文章