首页 > 代码库 > 如何循环遍历document.querySelectorAll()方法返回的结果
如何循环遍历document.querySelectorAll()方法返回的结果
使用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";})
有兴趣的朋友可以读一下MDN上的这篇文章。
如何循环遍历document.querySelectorAll()方法返回的结果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。