如何循环遍历document.querySelectorAll方法返回的结果

答案:2 悬赏:60 手机版

解决时间 2021-03-16 23:10

提问者网友：王者佥
2021-03-16 17:14

最佳答案

五星知识达人网友：第幾種人
2021-03-16 18:12

使用JavaScript的forEach方法，我们可以轻松的循环一个数组，但如果你认为document.querySelectorAll()方法返回的应该是个数组，而使用forEach循环它：

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支持：

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";
})

全部回答

1楼网友：冷風如刀
2021-03-16 19:20

假设你的页面中只有这些

标签。常规写法： 1 2 3 4 5 6 7 8 var lis = document.queryselectorall('li'); for(var i=0;i

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！