使用 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/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
- }
- };
- // 用法:
- // 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!
- });
还有一种语法: 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";
- })
有兴趣的朋友可以读一下 MDN 上的这篇文章.
来源: http://www.webhek.com/post/foreach-queryselectorall-nodelist.html