使用JavaScript的forEach
方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()
方法返回的应该是个数组,而使用forEach
循环它:
/* Will Not Work */document.querySelectorAll('.module').forEach(function() { });
执行上面的代码,你将会得到执行错误的异常信息。这是因为,document.querySelectorAll()
返回的不是一个数组,而是一个NodeList
。
对于一个NodeList
,我们可以用下面的技巧来循环遍历它:
var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.style.color = "red";});
当然,我们也可以用最传统的方法遍历它:
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/Modulevar forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); // passes back stuff we need }};// 用法:// optionally change the scope as final parameter too, like ECMA5var myNodeList = document.querySelectorAll('li');forEach(myNodeList, function (index, value) { console.log(index, value); // passes index + value back!});
还有一种语法:for..of
循环,但似乎只有Firefox支持:
/* Be warned, this only works in Firefox */var divs = document.querySelectorAll('div );for (var div of divs) { div.style.color = "blue";}
最后是一种不推荐的方法:给NodeList扩展一个forEach
方法:
NodeList.prototype.forEach = Array.prototype.forEach;var divs = document.querySelectorAll('div').forEach(function(el) { el.style.color = "orange";})