在JavaScript中，将NodeList转换为数组的最佳方法是什么？

javascript arrays dom

2022-08-30 05:33:07

DOM 方法（以及其他一些方法）返回一个 .document.querySelectorAll()NodeList

要对列表进行操作，例如使用，必须首先将转换为 .forEach()NodeListArray

将转换为的最佳方法是什么？NodeListArray

答案 1

使用ES6，您只需执行以下操作：

const spanList = [...document.querySelectorAll("span")];

答案 2

在 ES6 中，您可以使用 .然后使用您喜欢的数组方法。Array.from(myNodeList)

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

使用 ES6 填充程序也可以在较旧的浏览器中执行此操作。

如果您使用的是转译器（例如 Babel），还有另外两种选择：

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});