在 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

为什么要转换？ - 直接在元素集合上call 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){...})

像数组一样遍历 NodeList。

这会产生比 .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

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

var nodeArray = Array(...nodeList);

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

打字稿版本：

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

Answer 12

假设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_genericically_querySelectorAll