将 HTML Collection 转换为数组

引言

在 HTML 中，HTML 集合是 HTML 元素的集合，看起来像一个数组。我们可以通过各种 DOM 方法（例如 "getElementsByTagName" 或 "querySelectorAll"）返回此 HTML 集合。但是，HTML 集合不是一个实际的数组。

此外，它不支持数组特定的操作。因此，我们必须将 HTML 集合转换为数组以执行某些数组特定的操作。在本文中，我们将学习将 HTMLCollection 转换为数组的所有可能方法。

使用 Array.prototype.slice()

借助此方法，我们可以将 call() 与 Array.prototype.slice() 绑定。借助此方法，我们还可以在 HTMLCollection 上调用 Array.prototype.slice()。此外，我们可以借助此方法通过创建其浅拷贝来将 HTMLCollection 转换为数组。

语法

借助以下语法，我们可以实现 Array.prototype.slice()。

示例

让我们举个例子，更好地理解 Array.prototype.slice()。

HTML 代码

输出

使用 Array.from()

此方法从 ES6 开始引入 HTML。此方法将类似数组的可迭代对象作为输入，并返回一个包含相同元素的新数组。在我们的程序中，可迭代对象是 HTMLCollection。我们必须将该方法传递给此 Array，并且此方法返回一个新数组。

语法

我们可以借助以下语法实现 Array.from()。

输出

使用扩展运算符

借助此方法，我们可以将 HTMLCollection 转换为数组。此方法在内部将可迭代对象扩展为多个元素。通过在方括号内使用扩展语法，我们可以创建一个包含与 HTMLCollection 相同元素的数组。

语法

借助以下语法，我们可以实现扩展运算符。

让我们通过一个例子来理解这一点。

HTML 代码

输出

使用 for 循环

这是将 HTML 集合转换为数组的最常见方法。

语法

让我们通过一个例子来理解这一点。

HTML 代码

输出