遍历querySelectorAll匹配项

让我们看一下迭代NodeList一些选项，这是从运行document.querySelectorAll回来的。

我们已经写了一篇有关此的更新文章： 一堆用于遍历querySelectorAll NodeLists的选项 。

并非所有浏览器都支持NodeLists上的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） 解释了为什么这种方法很笨拙 ，并详细介绍了10多个问题。

您还可以使用经典的for循环：

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

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

托德的建议是制作自己的方法：

// 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文章中有更多信息。

翻译自: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/