HTMLCollection 和 JavaScript

在前端开发中，经常需要对 HTML 中的元素进行操作和获取。而 HTMLCollection 和 JavaScript 是两个重要的部分。它们的结合可以让你更加便捷地获取 HTML 元素并进行操作。

HTMLCollection 是什么？

HTMLCollection 是一个类数组对象，存储了 HTML 元素的列表。它是由文档对象模型（DOM）提供的，可以通过访问 DOM 对象获取 HTMLCollection。

HTMLCollection 与 NodeList 类似，但它们之间还是有很大区别的。HTMLCollection 只存储具有同一标签名的 HTML 元素。还有一个重要的区别，HTMLCollection 是动态的，它会实时同步文档中的元素，而 NodeList 是静态的，它只在创建时获取一次，不会更新。

JavaScript 中的 HTMLCollection

在 JavaScript 中，可以通过文档对象模型（DOM）来访问和操作 HTMLCollection。下面是一个简单的示例，展示了如何通过类名获取 HTMLCollection，并在控制台中打印出它的长度：

const elements = document.getElementsByClassName('example-class');
console.log(elements.length); // 输出示例元素的数量

HTMLCollection 和 Array 的区别

像 NodeList 和 HTMLCollection 这样的类数组对象与真正的数组有什么区别呢？下面是一些关键区别的总结：

• 类数组对象没有数组的内置方法，如 push、pop、join
• 类数组对象不能在 console.log 中使用展开运算符（spread operator）
• 类数组对象的长度是只读的，不可以修改

为了使 HTMLCollection 操作起来更为便捷，可以将其转换为一个真正的数组：

const elements = Array.from(document.getElementsByClassName('example-class'));

现在，elements 可以像正常的数组一样使用了，就可以调用内置方法、在控制台中使用展开运算符，等等。

HTMLCollection 和 jQuery

当然，我们还可以使用 jQuery 来操作 HTML 元素。$()函数就可以获取 jQuery 对象，而类似于 $('example-class') 的语句即可获取相应的 HTMLCollection 对象。

例如：

const $elements = $('.example-class');
console.log($elements.length); // 输出示例元素的数量

总结

HTMLCollection 是一个非常有用的类数组对象，它可以帮助你更加便捷地获取和操作 HTML 元素。不管你是使用原生的 JavaScript 、还是 jQuery ，都可以利用 HTMLCollection 来让代码更简洁、易读、易于维护。