循环遍历 querySelectorAll 匹配项

让我们看看一些迭代 NodeList 的选项，就像你从运行 document.querySelectorAll 后获得的那样。

我们已经撰写了一篇关于此的更新文章：循环遍历 querySelectorAll NodeLists 的多种选项。

并非所有浏览器都支持 NodeList 上的 forEach，但对于那些支持的浏览器

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log("forEach worked");
  });
});

这是一个巧妙的方法，可以通过更深层次的浏览器支持来解决这个问题。

var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

公平警告，Todd Motto 解释了为什么这种方法相当hacky，详细说明了它超过10个问题。

你也可以使用传统的 for 循环

var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Todd 的建议是自己编写一个方法

// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

// Usage:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
  console.log(index, value); // passes index + value back!
});

你也可以自己展开列表，这样你就可以在使用过程中访问其他数组方法。

[...buttons].forEach((button) => {
  button.addEventListener('click', () => {
    console.log("spread forEach worked");
  });
});

---

还有 for...of 循环。Firefox 是第一个支持此功能的浏览器，但支持度已经相当不错了

for (const button of buttons) {
  button.addEventListener('click', () => {
    console.log("for .. of worked");
  });
}

---

这非常复杂（可能很危险，不建议），但你可以 创建 NodeList 并使其具有与 Array 相同的 forEach 函数，然后使用它。

NodeList.prototype.forEach = Array.prototype.forEach;

var divs = document.querySelectorAll('div').forEach(function(el) {
  el.style.color = "orange";
})

---

在 MDN 文章 中有更多信息。