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

Question

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

要对列表进行操作（例如使用forEach()），NodeList 必须首先转换为Array。

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

Answer 1

使用 ES6，你可以简单地执行以下操作：

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

Answer 2

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

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

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

使用 ES6 shim 也可以在旧版浏览器中使用此功能。

---

如果如果您正在使用转译器（例如 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);
});

Answer 3

您可以使用 Array 原型中的 slice 方法将其转换为数组：

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

---

此外，如果您需要的只是 forEach，您可以调用 来自 Array 原型，无需先将其强制转换为数组：

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

---

在 ES6 中，您可以使用新的 Array.from 函数将其转换到数组：

Array.from(elList).forEach(function(el) {
    console.log(el);
});

目前仅在前沿浏览器中存在，但如果当您使用polyfill服务时，您将可以全面访问此功能。

---

如果您使用ES6转译器，您甚至可以使用for..of 循环代替：

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

Answer 4

为什么要转换？ - 只需直接在元素集合上调用 Array 函数即可；）

[].forEach.call( $('a'), function( v, i) {
    // do something
});

假设$ 当然是querySelectorAll 的别名

---

编辑：ES6 允许更短的语法 [...$('a')] （仅适用于 Firefox，截至 2014 年 5 月）

Answer 5

2020 更新：nodeList.forEach() 现已成为官方标准 并在所有当前浏览器中受支持。

较旧的浏览器可以使用下面的polyfill。

要在 JavaScript 中操作列表，例如使用 forEach()，必须将 NodeList 转换为数组。

那不是真的。 .forEach() 适用于当前浏览器。如果它丢失，您可以使用polyfill将.forEach()从Array添加到NodeList并且它工作正常：

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

您现在可以运行：

myNodeList.forEach(function(node){...})

像数组一样迭代NodeLists 。

这会产生比 .call() 更短、更干净的代码。

Answer 6

它必须是forEach吗？您可以简单地使用 for 循环来迭代列表：

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

Answer 7

好吧，这也适用于我：

const elements = Object.values( document.querySelector(your selector here) )

Object.values() 返回给定对象值的Array。 NodeList 是对象，就像 JS 中的一切一样。

https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

但它与 IE 不兼容，所以我猜Array.prototype.*array_method*.call(yourNodeList) 是最好的选择。有了这个，您可以调用 NodeList 上的任何数组方法

Answer 8

假设elems是一个nodeList：

var elems = document.querySelectorAll('select option:checked');

那么它可以变成一个数组，如下所示：

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll

Answer 9

这在 ES6 中对我有用，

假设你有这样的节点列表

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>


const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);

Answer 10

我使用以下内容是因为我认为它最容易阅读：

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Answer 11

ES6 允许使用像 var nodeArray = Array.from(nodeList) 这样很酷的方法，但我最喜欢的是新的展开运算符。

var nodeArray = Array(...nodeList);

Answer 12

打字稿版本：

const allDayElements: Element[] = [].slice.call(document.querySelectorAll('span'));