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

Posted 前端博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何循环遍历document.querySelectorAll()方法返回的结果相关的知识,希望对你有一定的参考价值。

使用javascriptforEach方法,我们可以轻松的循环一个数组,但如果你认为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上的这篇文章

以上是关于如何循环遍历document.querySelectorAll()方法返回的结果的主要内容,如果未能解决你的问题,请参考以下文章

我无法循环遍历我的 ids 参数,如何接收和循环遍历

jquery 如何遍历循环数组

JS如何遍历字符串

如何循环遍历一个部分的每个 UITextfield?

Ansible 嵌套循环 - 如何遍历循环项?

JS中如何跳出循环/结束遍历