DOM 方法document.querySelectorAll()（和其他一些方法）返回一个NodeList.
要对列表进行操作，例如 using forEach()，NodeList必须首先将 转换为Array。
将 the 转换NodeList为 an的最佳方法是Array什么？
在 JavaScript 中，将 NodeList 转换为数组的最佳方法是什么？
IT技术
javascript
arrays
dom
2021-03-08 17:43:06
6个回答
使用 ES6，您可以简单地执行以下操作：
const spanList = [...document.querySelectorAll("span")];
在 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);
});
您可以使用原型中的slice方法将其转换为数组Array：
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
}
为什么要转换？- 只是call直接在元素集合上的 Array 函数；)
[].forEach.call( $('a'), function( v, i) {
// do something
});
当然，假设$是querySelectorAll的别名
编辑：ES6 允许更短的语法[...$('a')]（仅适用于 Firefox，截至 2014 年 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() 任何地方都更短、更干净的代码。