HTML DOM scripts 集合（一文讲透）

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

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

在现代 Web 开发中，HTML、CSS 和 JavaScript 是构建动态网页的三大核心技术。其中，HTML DOM（Document Object Model）Scripts 集合是连接静态页面与动态交互的桥梁。它允许开发者通过 JavaScript 操控网页元素、响应用户操作，并实现复杂的功能。无论是表单验证、动态内容加载，还是页面动画效果，都离不开对 DOM 的操作。

对于编程初学者和中级开发者而言，掌握 HTML DOM Scripts 的核心概念和实践方法，是迈向专业 Web 开发的关键一步。本文将从基础到进阶，结合案例与代码示例，帮助读者系统性地理解这一主题。

一、HTML DOM 的基本概念

1.1 什么是 DOM？

DOM（Document Object Model，文档对象模型）可以理解为网页内容的“树状结构图”。它将 HTML 文档中的每个元素（如 <div>、<p>、<img>）转化为可编程的对象，形成层级关系。开发者可以通过 JavaScript 访问和修改这些对象，从而实现动态交互。

比喻：
想象一个图书馆的目录系统。DOM 就像这个目录，它记录了每本书（网页元素）的位置、内容和关联关系。通过 DOM，你可以快速找到某本书（元素），并修改它的标题、位置，甚至添加新书。

1.2 DOM 的核心组成部分

• 节点（Node）： DOM 中的最小单位，包括元素节点、文本节点、注释节点等。
• 属性（Attribute）： 元素的附加信息，如 <img src="image.jpg" alt="描述" /> 中的 src 和 alt。
• 方法（Method）： 可执行的操作，例如 getElementById() 或 addEventListener()。
• 事件（Event）： 用户或系统触发的行为，如点击（click）、页面加载（load）等。

二、HTML DOM Scripts 的核心操作

2.1 访问和选择元素

2.1.1 通过 ID 选择元素

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

// 通过 ID 获取元素
const element = document.getElementById("myElement");
console.log(element.textContent); // 输出 "Hello World"

关键点：

• document.getElementById() 是最直接的选择器，但要求元素必须有唯一的 id 属性。

2.1.2 通过类名或 CSS 选择器选择元素

<div class="content">动态内容</div>

// 通过类名获取元素（返回 NodeList）
const elements = document.getElementsByClassName("content");
console.log(elements[0].textContent); // 输出 "动态内容"

// 使用现代的 querySelector
const element = document.querySelector(".content");
console.log(element.textContent); // 同样输出 "动态内容"

对比：

• getElementsByClassName 返回的是动态更新的 HTMLCollection，而 querySelector 返回的是静态的单个元素。
• querySelectorAll 可以匹配多个元素，返回 NodeList。

2.2 修改元素内容与属性

2.2.1 动态修改文本内容

// 修改文本内容
element.textContent = "New Text"; // 替换原有内容
element.innerHTML = "<strong>Bold Text</strong>"; // 允许 HTML 标签

注意：

• textContent 更安全，避免 XSS（跨站脚本攻击）风险；innerHTML 可能执行嵌入的脚本。

2.2.2 操作元素属性

// 获取和设置属性
const img = document.querySelector("img");
img.src = "new-image.jpg"; // 修改图片路径
img.setAttribute("alt", "新描述"); // 添加或修改属性
console.log(img.getAttribute("width")); // 获取属性值

2.3 动态创建与删除元素

2.3.1 创建新元素

// 创建元素并添加内容
const newDiv = document.createElement("div");
newDiv.textContent = "新增内容";
newDiv.className = "new-class"; // 设置类名

// 插入到页面中
document.body.appendChild(newDiv); // 作为 body 的最后一个子元素

2.3.2 删除元素

// 移除元素
const elementToRemove = document.getElementById("target");
elementToRemove.parentNode.removeChild(elementToRemove);

三、事件驱动的 DOM 脚本

3.1 事件监听与处理

3.1.1 基础事件绑定

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

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

关键点：

• 使用 addEventListener 可以为元素绑定多个事件处理函数。
• 事件对象（如 event）可以传递更多信息，例如用户点击的坐标。

3.1.2 常见事件类型

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

3.2.1 事件冒泡机制

<div id="outer" style="padding:20px;">
  <div id="inner">点击我</div>
</div>

document.getElementById("outer").addEventListener("click", function() {
  console.log("外层被点击");
});

document.getElementById("inner").addEventListener("click", function() {
  console.log("内层被点击");
});

现象：
点击内层元素时，会先触发内层事件，再依次触发外层事件。这称为“事件冒泡”。

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

function innerClickHandler(event) {
  event.stopPropagation(); // 阻止冒泡
  event.preventDefault(); // 阻止默认行为（如表单提交）
}

四、动态内容加载与 AJAX

4.1 使用 fetch API 更新内容

// 获取外部 JSON 数据并更新页面
fetch("data.json")
  .then(response => response.json())
  .then(data => {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = `<p>${data.message}</p>`;
  })
  .catch(error => console.error("错误:", error));

关键点：

• fetch() 是现代浏览器中异步获取数据的标准方法。
• 使用 async/await 可以让代码更简洁：

async function loadContent() {
  try {
    const response = await fetch("data.json");
    const data = await response.json();
    document.getElementById("content").textContent = data.message;
  } catch (error) {
    console.error(error);
  }
}

4.2 结合 DOM 操作实现分页加载

// 示例：分页显示文章列表
let currentPage = 1;
const itemsPerPage = 5;

function loadPage(page) {
  // 计算起始索引
  const startIndex = (page - 1) * itemsPerPage;
  // 使用 slice 截取数据并渲染
  const items = data.articles.slice(startIndex, startIndex + itemsPerPage);
  renderItems(items);
}

function renderItems(items) {
  const container = document.getElementById("item-container");
  container.innerHTML = ""; // 清空原有内容
  items.forEach(item => {
    const newItem = document.createElement("div");
    newItem.textContent = item.title;
    container.appendChild(newItem);
  });
}

五、最佳实践与常见问题

5.1 性能优化

• 减少 DOM 操作频率： 频繁操作 DOM 会阻塞渲染，尽量将多次修改合并为一次。
• 使用委托事件： 对大量子元素统一绑定事件到父元素，避免为每个元素单独绑定。

// 委托事件示例
document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.classList.contains("child")) {
    // 处理子元素点击
  }
});

5.2 解决常见问题

• 元素未加载时操作 DOM：
  确保在页面加载完成后执行脚本，或使用 DOMContentLoaded 事件：

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

• 跨浏览器兼容性：
  使用工具库（如 jQuery）或 Polyfill 处理老旧浏览器的兼容问题。

结论：掌握 HTML DOM Scripts 的进阶之路

HTML DOM Scripts 集合是 Web 开发的核心工具，它连接了静态 HTML 与动态交互的桥梁。通过本文的讲解，读者可以掌握以下关键能力：

1. 基础操作： 元素选择、内容修改、属性管理。
2. 事件驱动： 绑定事件、处理冒泡与默认行为。
3. 高级应用： 动态内容加载、分页与性能优化。

对于编程初学者，建议从简单案例入手，逐步实践；中级开发者则可探索更复杂的场景，如结合框架（React、Vue）的虚拟 DOM 或服务端渲染技术。记住，DOM 的学习是一个持续的过程——通过不断实践与项目应用，你将逐渐成为 Web 开发的行家。

希望这篇文章能为你提供清晰的指导，欢迎在评论区分享你的学习心得或遇到的问题！