在前端开发中，我们常常遇到需要操作DOM元素的情况。当我们使用一些常用的DOM选择器（如getElementById、getElementsByTagName等）获取一个或多个DOM元素时，会得到三种不同类型的集合对象，它们分别是HTMLCollection、NodeList和对象数组。虽然它们都可以被视为类数组对象（即拥有length属性和通过索引进行访问的特性），但它们之间又有着一些重要的区别。本文将详细介绍这三种集合对象的差异，并探讨它们的学习和应用意义。
HTMLCollection
HTMLCollection 是一种动态集合，它会随着DOM树的变化而实时更新。HTMLCollection 只包含具有给定标签名称的元素节点，它没有forEach方法，也不能使用Array.prototype的方法进行扩展。由于其动态性质，使用HTMLCollection的元素数量可能会在执行期间更改，因此建议在每次需要使用该集合对象时重新获取它。下面是一个例子：
-- -------------------- ---- ------- ---- -------- ------ --- -------------------- ------ -------- ------ ----- -------- ----- --------- - ------------------------------------ ----------------------- -- ----------------- ---- ----------- --- ---------
NodeList
NodeList 是一种静态集合，它不会随着DOM树的变化而更新。NodeList 包含给定选择器匹配到的所有节点，包括元素节点、文本节点和注释节点等。与 HTMLCollection 不同的是，NodeList 拥有forEach方法，也可以使用其他Array.prototype的方法进行扩展。下面是一个例子：
-- -------------------- ---- ------- ---- -------- ------ --- -------------------- ------ -------- ------ ----- -------- ----- --------- - -------------------------------- ----------------------- -- ----------- ---- ----------- --- ------------------------ -- - ------------------------------ --- ---------
需要注意的是，对于某些操作（如querySelectorAll）、某些情况下（如在iframe中操作父页面的元素）或者在非标准的DOM结构（如SVG）中，NodeList可能表现不同。可以通过将其转换为数组来解决这些问题。
对象数组
对象数组是由开发者自行创建，并且包含任意类型的对象（包括DOM元素）。与HTMLCollection和NodeList不同，对象数组不具备DOM实时更新和选择器匹配等功能，但它可以存储和操作任何类型的对象，并且比HTMLCollection和NodeList更加灵活。下面是一个例子：
const items = [
{ name: 'item 1', price: 10 },
{ name: 'item 2', price: 20 },
{ name: 'item 3', price: 30 }
];
console.log(items); // Array(3) [{name: "item 1", price: 10}, {name: "item 2", price: 20}, {name: "item 3", price: 30}]总结
在DOM操作中，HTMLCollection、NodeList和对象数组这三种集合对象都有其各自的特点和应用场景。HTMLCollection适用于动态获取具有给定标签名称的元素节点；NodeList适用于静态获取选择器匹配到的所有节点，并且可以使用forEach方法进行扩展；而对象数组则更加灵活，可以存储和操作任何类型的对象（包括DOM元素）。在实际开发中，需要根据具体的业务需求选择适当的集合对象进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14299