在JavaScript中，将节点列表转换为数组的最佳方式是什么？

DOM方法

document.querySelectorAll（）

（以及其他一些方法）返回一个

节点列表

要对列表进行操作，例如使用
forEach（）
，必须首先将
节点列表
转换为
数组

将
节点列表
转换为
数组
的最佳方法是什么？
是否必须是
forEach
？您可以简单地使用
for
循环来迭代列表：

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

for（变量i=0；i
您可以使用
数组
原型中的
切片
方法将其转换为数组：

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


此外，如果您只需要
forEach
，则可以从
数组
原型调用它，而无需先将其强制为数组：

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


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

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

这目前仅在最先进的浏览器中使用，但如果您是，您将可以全面访问此功能


如果正在使用，甚至可以使用循环：

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

为什么要皈依只需在元素集合上直接调用数组的
函数；）

当然，假设$是querySelectorAll的别名


编辑：ES6允许更短的语法
[…$（'a'）]
（仅适用于Firefox，截至2014年5月）
假设elems是节点列表：

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

然后可以将其转换为数组，如下所示：

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

参考：
2020更新：并在所有当前浏览器中受支持。
较旧的浏览器可以使用下面的polyfill

要在javascript中对列表进行操作，例如使用forEach（），必须将节点列表转换为数组

那不是真的
.forEach（）
在当前浏览器中工作。如果缺少，可以使用polyfill将.forEach（）从数组添加到节点列表，效果良好：

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

您现在可以运行：

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

像数组一样迭代节点列表

这会产生比.call（）更简短、更清晰的代码。
对于ES6，您可以使用
Array.from（myNodeList）
。然后使用您最喜欢的数组方法

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

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

在较旧的浏览器中也可以使用


如果您使用的是transpiler（例如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);
});

ES6允许一些很酷的方法，比如
var noderray=Array.from（nodeList）
，但我最喜欢的是新的扩展操作符

var nodeArray = Array(...nodeList);

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

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

这在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);


Flexbox视频
Flexbox视频
重复播放视频
Flexbox视频
Flexbox视频
Flexbox视频
重复播放视频
Flexbox视频
Flexbox视频
Flexbox视频
Flexbox视频
重复播放视频
Flexbox视频

const items=Array.from（document.querySelectorAll（'[data time]'）；
控制台日志（项目）；
我之所以使用以下内容，是因为我认为它最容易阅读：

const elements=document.getElementsByClassName（'element'）；
[…元素].forEach（（元素）=>{
//代码
});
好吧，这对我也适用：

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

Object.values（）
返回给定对象的值的数组
NodeList
是对象，JS中的所有内容都是对象


但是它与IE不兼容，所以我想
Array.prototype.*Array\u method.*.call（yourNodeList）
是最好的选择。有了它，您可以调用
节点列表上的任何数组方法，假设
$
是
querySelectorAll
。您的答案意味着使用jQuery。如果是这样的话，这个愚蠢的行为完全没有必要，多亏了。哈哈，为什么？没有任何东西禁止您使用像
函数$（s）{return document.querySelectorAll（s）；}
这样的别名。如果您要使用jQuery，那么更简洁的解决方案是：
$（'a'）。每个（函数（i，v）{…}）
offtopic:EcmaScript 5已经是一年的标准，所有当前一代浏览器都支持新的数组方法，问题是如何在NodeList aka Element collection上使用这些方法。谢谢。在更新的javascript下，我认为/希望有更简洁的强制。@cc young-Do note，我之所以使用
Array.prototype.forEach
而不是
[].forEach
，是因为后者创建了一个新的数组对象，这是完全不必要的。@JosephSilber啊，谢谢你-这就是创建的新数组是空的
[]
？我的想法是，它会被垃圾收集，对内存的影响可以忽略不计，有人对此发表评论吗？@Daniel这是真的，但仍然存在创建和销毁数组的计算。+1用于使用不添加不必要的数组转换的简单解决方案。仅供参考，您可以使用
elementList[i]
，而不是
elementList.item（i）
。我个人认为
forEach（）
是一种更好的编程风格，而且不太冗长-ymmv@cc杨：事实上，我同意你的看法。除了在这种情况下，我需要运行转换，以便使用我最喜欢的模式。这让它显得笨重，看起来像：“当你只有一把锤子的时候，一切看起来都像钉子。”这里有一个更简单的方法：）
for（var-oElement，i=0；oElement=aMenuItemsElements；i++{console.log（oElement）；}
这里的问题是你不能为（var-i…）嵌套另一个
循环，因为for循环没有创建自己的作用域（就像现在在C/C++中一样）。然后
i
获取mi
const elements = Object.values( document.querySelector(your selector here) )