从 HTMLCollection 创建数组 - JavaScript

HTMLCollection 类型是一个节点元素的集合，它是通过获取 DOM 元素的方法（如 document.getElementsByTagName()）获取的，但它并不是一个标准的数组类型。因此，在对 HTMLCollection 进行操作时，有时需要将其转换为数组类型进行进一步的操作，本文将介绍如何从 HTMLCollection 中创建数组。

从 HTMLCollection 创建数组

通过 Array.from() 方法可以将具有迭代器的对象转换为数组。由于 HTMLCollection 是一个类数组对象，因此它拥有迭代器，可以使用 Array.from() 方法将其转换为数组。

以下是示例代码：

const listItems = document.getElementsByTagName('li');
const listItemsArray = Array.from(listItems);
console.log(listItemsArray);

上述代码获取了一个包含所有 <li> 元素的 HTMLCollection，并使用 Array.from() 转换为一个数组并输出该数组。在此示例中 Array.from() 方法的作用是将 listItems 转换为一个标准的数组，并将其由 listItemsArray 变量接收。

操作 HTMLCollection 数组

对于 HTMLCollection 的数组可以使用标准数组的操作方法进行操作。例如，可以使用 .map() 方法对其进行映射，使用 .filter() 方法对其进行过滤，使用 .forEach() 方法对其进行遍历，等等。

以下是示例代码：

const listItems = document.getElementsByTagName('li');
const listItemsArray = Array.from(listItems);
const itemTexts = listItemsArray.map(item => item.textContent);
console.log(itemTexts);

上述代码使用 Array.from() 方法将 listItems 转换为标准的数组，并使用 .map() 方法对其进行映射以获取每个 <li> 元素的文本内容，并将其输出到控制台。

结论

HTMLCollection 不是一个标准的数组类型，但是可以通过 Array.from() 方法将其转换为标准的数组，以便进行标准数组的操作方法。这种方式可以使得对 HTMLCollection 进行更灵活和高效的操作。