Javascript - 将 querySelectorAll 转换为数组

当我们在使用 Javascript 中的 querySelectorAll 方法来获取 DOM 元素集合时，有时候需要将其转换为数组以便于操作和管理。在本文中，我们将介绍如何使用不同的方法将 querySelectorAll 返回的集合转换为数组。

方法一 - 使用 Array.from

我们可以很容易地使用 Array.from 方法将 querySelectorAll 返回的 NodeList 转换为数组。下面是一个例子：

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

在这个例子中，我们使用 Array.from 将返回的 NodeList 转换为数组，并将其存储在名为 elements 的变量中。

方法二 - 使用展开运算符

我们还可以使用 Javascript 中的展开运算符语法来将 NodeList 转换为数组。下面是一个代码片段：

const elements = [...document.querySelectorAll('.example-class')];

在这个例子中，我们使用展开运算符 ... 将 NodeList 转换为数组，并将其存储在 elements 变量中。

方法三 - 使用 Array.prototype.slice.call

最后，我们还可以使用 Array.prototype.slice.call 方法将 NodeList 转换为数组。下面是一个代码片段：

const elements = Array.prototype.slice.call(document.querySelectorAll('.example-class'));

在这个例子中，我们使用 Array.prototype.slice.call 方法将 NodeList 转换为数组，并将其存储在名为 elements 的变量中。

结论

无论使用哪种方法，我们都可以很容易地将 querySelectorAll 返回的集合转换为数组。这样我们就可以使用数组的各种高级特性来操作和处理 DOM 元素。