在Javascript中,将NodeList转换为数组的最佳方法是什么

Question

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

要在列表上操作,例如使用forEach(),NodeList必须先将其转换为Array.

什么是转换的最佳方式NodeList,以一个Array？

Answer 1

使用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);
});

Answer 2

使用ES6,您可以简单地执行:

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

Answer 3

您可以使用原型中的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
}

Answer 4

为何转换？- call直接在元素集合上的Array函数;)

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

假设$是querySelectorAll的别名,当然

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

Answer 5

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

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

Answer 6

要在javascript中对列表进行操作,例如使用forEach(),必须将NodeList转换为Array.

这不一定是真的.您可以将.forEach()从Array添加到NodeList,它可以正常工作:

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

你现在可以运行:

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

像Arrays一样迭代NodeLists.

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

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