遍历选定元素的列表

如何遍历 NodeList 并对每个元素执行某些操作

---

这里有几种遍历选定元素列表的方式。 首先了解下 for() 循环:

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

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

如您所见，NodeList 的长度是在循环之前确定的。 这种方法比在for语句中使用 divs.length 更快，因为否则每次迭代都会重复读取该长度。

另外 while()循环是另外一种更高效的方法，并且代码量更少:

var divs = document.querySelectorAll('div'), i = divs.length;
while (i--) {
    divs[i].style.color = "green";
}
      

最后，您可以使用这便捷方法，类似于jQuery的 $.each()方法:

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

[].forEach.call(divs, function(item) {
    item.style.color = "green";
});
      

在现代浏览器（不支持IE）中，您也可以这样简单地执行以下操作:

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

divs.forEach(function(item) {
    item.style.color = "green";
});