异常教程

JavaScript HTML DOM 集合(Collection)（建议收藏）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发中，JavaScript 与 HTML 的交互是构建动态页面的核心能力之一。而 JavaScript HTML DOM 集合(Collection) 正是连接这两者的关键桥梁。无论是需要一次性操作多个元素，还是根据用户行为动态更新页面内容，DOM 集合都扮演着不可或缺的角色。本文将从基础概念出发，逐步解析其特性、应用场景及常见问题，并通过案例帮助读者掌握这一工具的使用技巧。

一、什么是 DOM 集合？

1.1 DOM 的基础概念

DOM（Document Object Model，文档对象模型） 将 HTML 文档表示为树形结构，每个节点（如标签、文本等）对应一个对象。而 DOM 集合则是指通过 JavaScript 获取到的一组 DOM 节点的集合，例如页面中所有 <div> 元素或具有相同类名的元素。

可以将 DOM 集合想象为一个“动态书架”：

  • 书架上的每一本书对应一个 DOM 节点；
  • 书架本身可以随时增减书籍（即动态更新元素）；
  • 书籍的排列顺序遵循文档的结构。

1.2 两种常见集合类型

JavaScript 中的 DOM 集合主要分为两类：

  1. NodeList：

    • 通过 document.querySelectorAll() 等方法返回；
    • 支持 length 属性和索引访问（如 nodes[0]），但不直接具备数组方法（如 map()）。

  2. HTMLCollection：

    • 通过 document.getElementsByTagName() 或 document.getElementsByClassName() 等方法返回；
    • 动态更新，集合内容会随页面元素变化而实时变化。

示例代码：

// 获取所有 <div> 元素，返回 NodeList
const divs = document.querySelectorAll("div");

// 获取所有 class 为 "item" 的元素，返回 HTMLCollection
const items = document.getElementsByClassName("item");

二、如何获取和操作 DOM 集合

2.1 常用获取方法

以下方法可返回不同类型的集合：
| 方法 | 返回类型 | 特点 |
|------|----------|------|
| document.querySelectorAll(selector) | NodeList | 支持 CSS 选择器，静态集合（不随 DOM 变化更新） |
| document.getElementsByClassName(name) | HTMLCollection | 根据类名筛选，动态更新 |
| document.getElementsByTagName(name) | HTMLCollection | 根据标签名筛选，动态更新 |
| document.getElementsByName(name) | NodeList | 根据 name 属性筛选 |

示例：

// 通过类名获取动态集合
const listItems = document.getElementsByClassName("list-item");
listItems[0].textContent = "第一个元素内容已修改";

2.2 遍历集合的技巧

由于 DOM 集合并非真正的数组，直接使用 forEach() 会报错。以下是两种常见遍历方法：

2.2.1 使用 for 循环

const buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    console.log(`按钮 ${i + 1} 被点击`);
  });
}

2.2.2 转换为数组后使用数组方法

// 使用 Array.from() 或扩展运算符
const items = document.querySelectorAll(".item");
Array.from(items).forEach(item => {
  item.style.backgroundColor = "lightblue";
});

三、DOM 集合的动态特性与注意事项

3.1 动态更新的特性

HTMLCollection 是“活集合”，会实时反映页面元素的变化。例如：

const divs = document.getElementsByTagName("div");
// 在页面中新增一个 <div> 元素后
console.log(divs.length); // 会自动增加

而 NodeList 则是“静态集合”，除非重新调用查询方法，否则不会更新。

3.2 常见误区与解决方案

误区 1：误用集合作为数组

// 错误示例：尝试直接调用数组方法
document.querySelectorAll("p").map(p => p.textContent); // 报错！

// 正确做法：转换为数组
Array.from(document.querySelectorAll("p")).map(p => p.textContent);

误区 2：忽略索引越界

const items = document.getElementsByClassName("non-existent"); // 无匹配元素时
console.log(items[0]); // 可能返回 undefined，需判断长度

3.3 性能优化建议

  • 避免频繁查询：将集合存储在变量中复用，而非重复调用 querySelectorAll()；
  • 谨慎使用动态集合：若需固定元素列表，建议用 Array.from() 转换为静态数组。

四、实战案例：动态表格操作

4.1 案例目标

实现一个可动态添加、删除行的表格，并通过 DOM 集合批量更新样式：

4.1.1 HTML 结构

<table id="myTable">
  <tr><td>行1</td></tr>
  <tr><td>行2</td></tr>
</table>
<button onclick="addRow()">添加行</button>
<button onclick="highlightRows()">高亮所有行</button>

4.1.2 JavaScript 实现

function addRow() {
  const table = document.getElementById("myTable");
  const newRow = table.insertRow(-1);
  newRow.innerHTML = "<td>新行</td>";
}

function highlightRows() {
  // 获取所有 <tr> 元素，转换为数组后操作
  const rows = Array.from(document.querySelectorAll("tr"));
  rows.forEach(row => {
    row.style.backgroundColor = "yellow";
  });
}

4.2 案例解析

  • 动态操作：通过 insertRow() 方法实时修改 DOM，集合 rows 会自动包含新增的行；
  • 批量操作：利用数组方法简化样式更新逻辑；
  • 事件绑定：通过按钮的 onclick 属性直接触发函数，体现 DOM 集合与交互的结合。

五、进阶技巧：结合现代 JavaScript

5.1 使用 for...of 遍历

ES6 引入的 for...of 循环可直接作用于 NodeList：

const paragraphs = document.querySelectorAll("p");
for (const para of paragraphs) {
  para.style.color = "red";
}

5.2 结合 CSS 选择器优化查询

利用更精准的 CSS 选择器减少遍历范围：

// 直接获取 class 为 "active" 的 <li> 元素
const activeItems = document.querySelectorAll("li.active");

结论

掌握 JavaScript HTML DOM 集合 的使用，是 Web 开发者提升效率的关键一步。通过本文的讲解与案例，读者应能理解集合的类型差异、动态特性及常见操作方法。无论是构建响应式 UI 还是优化性能，DOM 集合都提供了灵活且强大的支持。建议读者通过实际项目练习，逐步熟悉其特性，从而在开发中游刃有余。

延伸思考：随着 Web API 的发展，如 Element.closest()、Element.matches() 等方法的出现，DOM 操作的边界不断扩展。未来，结合 CSS 选择器与集合操作的组合，将进一步简化复杂场景的实现。

最新发布

查看更多文章