对于循环查询选择器全部

for of loop querySelectorAll

本文关键字：查询 选择器 全部 循环 于循环      更新时间：2023-09-26

Mozilla声明"for of loops将正确循环NodeList对象"。（来源：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;
}

编辑：这是在Chrome 51中提供的。

杰克·阿奇博尔德（Jake Archibald）发布了一个简单的修复：

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

和循环。

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

这没有标准，关于 DOM 应该如何与 ES6 集成的讨论仍在积极进行。请注意，很明显，querySelectorAll应该返回一些可以在for of循环中使用的可迭代的东西（正如常见的期望要求的那样），但不清楚应该如何发生（让我们实现NodeList可迭代接口？让一些Elements集合子类Array？

您可以使用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 源代码中引入的。

由于我已经成功地在 Gecko 中使用了 for..of 来迭代 NodeList s，这似乎是一个浏览器错误，或者至少是浏览器缺乏。

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

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

（这也使用let，但那是另一回事了。

尝试使用Array.prototype.entries() 

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

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

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

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

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

这利用了Google Chrome 46 +，Firefox 16 +和Edge支持的传播运算符，并且只是为了好玩的箭头功能。

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

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

IE9及以上版本良好

对

NodeList的原生Symbol.iterator支持于2014年添加到WHATWG的DOM规范中。

不幸的是，Chrome

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

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

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

我遇到了这个问题。事实证明，我的是由使用参数而不是数组调用 Promise.all（） 引起的。例如：

之前： Promise.all(p1, p2)

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

希望这对某人有所帮助。

相关文章：