Question

Mozilla声称＆＃34; for循环将正确地遍历NodeList对象＆＃34;。（来源：https://developer.mozilla.org/en-US/docs/Web/API/NodeList）但是，这在Chrome 43中不起作用。这是不正确的文档还是浏览器错误？

带有复选框的页面上使用的复制示例代码：

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

Answer 1

文档是正确的，但我不会称之为错误。相反，它是一个尚未实现的功能＆＃34;。

没有这方面的标准，并且仍然在积极讨论DOM应如何与ES6集成。请注意，很明显 querySelectorAll应该返回可以在for of循环中使用的可迭代的东西（作为常见的期望要求），但它不清楚应该如何发生（让NodeList实现Iterable接口？让一些Elements collection子类Array？）。

Answer 2

由于我已成功使用Gecko中的for..of来迭代NodeList，因此这似乎是一个浏览器错误，或者至少是浏览器缺失。

我目前使用的用户脚本的实际工作代码：

let llnk = document.querySelectorAll("div#threadlist a.threadtitle_unread");
for (let lnk of llnk) {
    //...
}

（这也使用let，但这是另一个故事。）

Answer 3

尝试使用Array.prototype.entries()

＆＃13;

var list = [].entries.call(document.querySelectorAll("input[type=checkbox]"));

for (item of list) {
  item[1].checked = true;
};

＆＃13;

<input type="checkbox" /><input type="checkbox" />

＆＃13;

您也可以使用Array.prototype.values()

＆＃13;

var list = [].values.call(document.querySelectorAll("input[type=checkbox]"));

for (item of list) {
  item.checked = true;
};

＆＃13;

<input type="checkbox" /><input type="checkbox" />

＆＃13;

Answer 4

您可以使用Array.from

let _list = document.querySelectorAll('input[type=checkbox]');

let list = Array.from(_list);

for (let item of list) {
  //... just like an array
  item.checked = true
}

或更短时间

let list = document.querySelectorAll('input[type=checkbox]');

for (let item of Array.from(list)) {
  item.checked = true
}

重要说明 Array.from已在Chrome 45 source中引入。

Answer 5

这是现代的另一种解决方案：

[...document.querySelectorAll("input[type=checkbox]")].forEach(node => {
     node.textContent = "foo";
});

这利用了Google Chrome 46 +，Firefox 16+和Edge支持的spread operator，而arrow function只是为了好玩。

Answer 6

这就是我所做的，采用不同的方法

Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"),function(ele,idx)
{
    ele.checked = true;
}

从IE9及以上

获得好处

Answer 7

2014年对Symbol.iterator的{{1}}原住民NodeList支持added。

不幸的是，Chrome 51是第一个支持它的Chrome版本，它的Beta版本在撰写此答案时才刚刚发布。此外，任何版本的Internet Explorer或Edge都不支持。

要在所有浏览器中为您的代码添加Symbol.iterator NodeList支持，只需使用以下polyfill：

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

Answer 8

我有这个问题。原来我的调用是通过参数而不是数组调用Promise.all（）引起的。例如：

之前：Promise.all(p1, p2)

之后：Promise.all([p1, p2])

希望这有助于某人。

for循环querySelectorAll

8 个答案: