从 jbranchaud/til 学习：如何将 HTMLCollection 转换为数组

从 jbranchaud/til 学习：如何将 HTMLCollection 转换为数组

til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til

什么是 HTMLCollection？

在 JavaScript 中，当我们使用一些 DOM 查询方法如 getElementsByClassName()、getElementsByTagName() 或 querySelectorAll() 时，返回的结果通常是一个 HTMLCollection 对象。这是一个类数组对象，包含了匹配指定条件的 DOM 元素集合。

const elements = document.getElementsByClassName("some-class");
console.log(elements); // 输出: HTMLCollection(5) [ ... ]

为什么需要转换？

HTMLCollection 虽然看起来像数组，但它实际上是一个动态的 DOM 元素集合，不具备数组的许多实用方法。这意味着：

1. 不能直接使用 map()、filter()、reduce() 等数组方法
2. 它是一个实时集合，DOM 的变化会自动反映在集合中
3. 在某些情况下，直接操作可能不如数组方便

转换方法详解

1. 使用 Array.from()

这是最现代且推荐的方法，ES6 引入的 Array.from() 方法可以轻松将类数组对象转换为真正的数组。

const elementsArray = Array.from(document.getElementsByClassName("some-class"));

优点：

• 代码简洁明了
• 支持所有现代浏览器
• 可以添加映射函数作为第二个参数

2. 使用扩展运算符(...)

ES6 的扩展运算符也能实现同样的效果：

const elementsArray = [...document.getElementsByClassName("some-class")];

3. 传统方法：Array.prototype.slice.call()

在 ES6 之前，常用的方法是：

const elementsArray = Array.prototype.slice.call(document.getElementsByClassName("some-class"));

转换后的优势

将 HTMLCollection 转换为数组后，你可以：

1. 使用所有数组方法：

   elementsArray.map(element => element.textContent);
   

2. 安全地遍历和修改，不会受到 DOM 实时更新的影响

3. 使用数组特有的功能如 length 属性、索引访问等

实际应用示例

假设我们有一组带有 "item" 类的元素，我们想获取它们的文本内容并过滤出特定内容：

// 获取元素并转换为数组
const items = Array.from(document.getElementsByClassName("item"));

// 使用数组方法处理
const filteredContents = items
  .map(item => item.textContent.trim())
  .filter(content => content.length > 10);

console.log(filteredContents);

注意事项

1. 转换后的数组是静态的，不会随 DOM 变化自动更新
2. 对于大型 DOM 集合，转换可能会有轻微性能开销
3. 如果只需要遍历而不需要数组方法，也可以直接使用 for...of 循环遍历 HTMLCollection

总结

掌握 HTMLCollection 到数组的转换是前端开发中的基础技能，它能让你更灵活地处理 DOM 元素集合。在现代 JavaScript 开发中，Array.from() 是最简洁高效的解决方案，值得优先采用。

til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til