将JS DOMTokenList转换为数组

在JavaScript中，DOMTokenList是一个接口，表示一个元素的类似于集合的列表属性。它通常用于管理元素的类名或数据属性等内容。虽然DOMTokenList与数组很相似，但它并不是一个真正的数组。

在本教程中，将介绍如何将DOMTokenList转换为数组。

将DOMTokenList转换为数组的方法

要将DOMTokenList转换为数组，您可以通过以下方法之一来实现。

使用Array.from()方法

ES6引入了Array.from()方法，该方法可将类数组对象或可迭代对象转换为数组。由于DOMTokenList具有类似数组的结构，因此可以将其作为参数传递给该方法，以获得一个数组。

以下是示例代码：

const element = document.getElementById('my-element');
const tokenList = element.classList;
const tokenArray = Array.from(tokenList);

在这个示例中，首先取得了一个元素并获取了它的classList属性。然后将这个类数组对象传递给Array.from()方法，使它返回一个数组。

使用数组展开运算符（Spread Operator）

可以使用数组展开运算符（...）将DOMTokenList转换为数组。该运算符将可迭代对象（例如类数组对象）展开为一组参数，在这种情况下将它转换为数组。

以下是示例代码：

const element = document.getElementById('my-element');
const tokenList = element.classList;
const tokenArray = [...tokenList];

在这个示例中，将创建一个数组，其中包含与DOMTokenList中相同的元素。展开运算符（...）使得DOMTokenList看起来像几个参数，即一个数组的元素。

结论

通过ES6中的Array.from()方法或数组展开运算符，可以将DOMTokenList转换为数组。这使得类似于DOMTokenList的列表可以像正常的JavaScript数组一样进行操作。