异常教程

DOM HTMLCollection（超详细）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，DOM（文档对象模型）是连接 HTML、CSS 和 JavaScript 的核心桥梁。而 HTMLCollection 是 DOM 中一个至关重要的接口，它允许开发者通过 JavaScript 动态操作页面中的 HTML 元素。无论是初学者还是中级开发者，理解 HTMLCollection 的特性与用法，都能显著提升对 DOM 操控的效率。本文将从基础概念出发，结合实例代码，深入浅出地解析这一主题，并帮助读者掌握如何在实际项目中灵活运用它。

什么是 HTMLCollection？

HTMLCollection 是一种特殊的 JavaScript 对象，它以类似数组的形式存储一组 HTML 元素。当开发者通过 DOM 方法（如 document.querySelectorAll() 或 document.getElementsByClassName()）选择多个元素时，返回的结果通常是一个 HTMLCollection 或 NodeList（具体类型取决于方法）。

核心特性

  1. 动态更新：HTMLCollection 是“动态”的，这意味着如果页面中的元素发生变化（例如新增或删除元素），集合会自动更新，无需手动刷新。
  2. 类似数组但非数组：它支持通过索引访问元素（如 collection[0]），但缺少数组的原生方法（如 map() 或 filter()）。
  3. 命名访问：除了通过索引访问元素，还可以通过元素的 name 或 id 属性直接获取元素（例如 collection.item('myButton')）。

形象比喻

想象一个超市的货架：

  • 每个商品（元素）按顺序排列，可以通过编号（索引）找到它。
  • 同时，商品可能有标签（如“苹果”或“香蕉”），你可以直接通过标签名称快速定位。
  • 如果货架上的商品被增减，货架会自动调整，无需重新整理。

HTMLCollection 的常见来源

开发者通常通过以下方法获取 HTMLCollection：

1. document.getElementsByTagName()

返回指定标签名的所有元素：

const paragraphs = document.getElementsByTagName("p");  
console.log(paragraphs.length); // 输出页面中 <p> 标签的数量

2. document.getElementsByClassName()

通过类名选择元素：

const buttons = document.getElementsByClassName("btn");  
// 通过类名 "btn" 获取所有按钮元素

3. document.getElementsByName()

通过 name 属性选择元素（常用于表单）：

const inputs = document.getElementsByName("username");

4. element.children

获取某个元素的所有直接子元素：

const container = document.getElementById("myContainer");  
const children = container.children; // 返回容器的所有直接子节点

HTMLCollection 的常用操作

访问元素

通过索引

const items = document.querySelectorAll("li"); // 返回 HTMLCollection  
console.log(items[0]); // 获取第一个 <li> 元素

通过 item() 方法

console.log(items.item(2)); // 获取第三个元素（索引从 0 开始）

通过 namedItem() 方法

如果元素有 name 或 id 属性，可直接通过名称访问：

<input name="search" type="text">  

const inputField = document.getElementsByName("search").namedItem("search");  
// 或更简洁的写法：  
const inputField = document.querySelector("[name='search']");

遍历元素

由于 HTMLCollection 不是真正的数组，需将其转换为数组后再使用数组方法：

// 方法1：使用扩展运算符  
const elements = [...document.getElementsByClassName("card")];  
elements.forEach(element => element.style.color = "red");  

// 方法2：使用 Array.from()  
Array.from(items).map(item => console.log(item.textContent));

动态更新示例

假设页面中有一个按钮，点击后动态添加一个 <div>：

document.getElementById("addButton").addEventListener("click", () => {  
  const newDiv = document.createElement("div");  
  newDiv.textContent = "New Element";  
  document.body.appendChild(newDiv);  
});  

// 获取所有 <div> 元素  
const divs = document.getElementsByTagName("div");  
console.log(divs.length); // 点击按钮后，长度会自动增加

HTMLCollection 与 NodeList 的区别

开发者常混淆 HTMLCollection 和 NodeList，但二者有关键差异：

特性HTMLCollectionNodeList
动态性动态更新静态集合（需手动更新）
返回来源getElementsByTagName 等document.querySelectorAll
兼容性兼容性更广（支持旧版浏览器）需现代浏览器支持
方法支持支持 item() 和 namedItem()无命名访问功能

实际应用建议

  • 动态操作：优先使用 HTMLCollection，因其自动更新特性适合实时交互场景。
  • 复杂操作：若需使用数组方法（如 map()），可将 NodeList 或 HTMLCollection 转换为数组。

实战案例：表单验证

假设有一个包含多个输入框的表单，需要验证所有输入是否非空：

<form id="myForm">  
  <input type="text" class="required" placeholder="Name">  
  <input type="email" class="required" placeholder="Email">  
  <button type="submit">Submit</button>  
</form>  

document.getElementById("myForm").addEventListener("submit", (e) => {  
  e.preventDefault(); // 阻止默认提交行为  

  const requiredFields = document.getElementsByClassName("required");  

  // 将 HTMLCollection 转换为数组  
  const fieldsArray = Array.from(requiredFields);  

  // 验证每个字段  
  const isValid = fieldsArray.every(field => field.value.trim() !== "");  

  if (isValid) {  
    console.log("Form submitted successfully!");  
  } else {  
    console.log("Please fill all required fields.");  
  }  
});

案例解析

  1. 获取集合：通过 getElementsByClassName 获取所有带有 required 类的元素。
  2. 转换为数组：使用 Array.from() 调用 every() 方法遍历验证。
  3. 动态更新：如果表单动态添加新字段，无需重新获取集合，直接使用现有 requiredFields 即可。

进阶技巧与注意事项

1. 避免直接修改 HTMLCollection

由于它是动态的，直接修改集合（如 delete）可能引发意外行为。建议通过 DOM 方法操作元素本身：

// 错误示例（无法直接删除）  
const items = document.getElementsByTagName("li");  
delete items[0]; // 无效操作  

// 正确做法  
const firstItem = items[0];  
firstItem.remove(); // 直接删除元素

2. 处理空集合

在获取元素前，始终检查集合是否为空，避免 undefined 错误：

const elements = document.getElementsByClassName("not-exist");  
if (elements.length > 0) {  
  console.log(elements[0].textContent);  
}

3. 与现代 JavaScript 结合

利用 ES6 的扩展运算符简化代码：

// 传统写法  
const elements = document.getElementsByClassName("item");  
for (let i = 0; i < elements.length; i++) {  
  elements[i].classList.add("active");  
}  

// 现代写法  
[...document.getElementsByClassName("item")].forEach(element =>  
  element.classList.add("active")  
);

结论

HTMLCollection 是 DOM 操控中不可或缺的工具，它以动态、灵活的方式帮助开发者管理页面元素。无论是基础的元素遍历，还是复杂的交互逻辑，理解其特性与用法都能显著提升编码效率。

通过本文的讲解，读者应能掌握以下核心技能：

  1. 如何通过多种方法获取 HTMLCollection；
  2. 如何安全地访问、遍历和操作集合中的元素；
  3. 在实际项目中运用 HTMLCollection 解决常见问题（如表单验证）。

建议读者通过编写小型项目（如动态列表或交互式表单）进一步巩固这些知识。随着实践的深入，HTMLCollection 将成为你构建高效、响应式 Web 应用的得力助手。

最新发布

查看更多文章