如何循环遍历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/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上的这篇文章

时间: 2024-04-21 11:46:01

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

php中遍历数组的方法

参考网址:http://www.jb51.net/article/29949.htm 这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为遍历数组而设计的语句,推荐大家使用.先分别介绍这几种方法 PHP中遍历数组有三种常用的方法: 一.使用for语句循环遍历数组: 二.使用foreach语句遍历数组: 三.联合使用list().each()和while循环遍历数组. 这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开

document.querySelector和querySelectorAll方法

querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). 3.返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果. 这两个方法都可以接受三种类型的参数:id(#),class(.),标签,很像jquery的选择器. var ob

javascript增加Array的each方法 循环遍历多维数组

由于ECMA提供遍历数组的方法forEach()只能遍历一维数组,没有提供循环遍历多维数组的方法,所以我们自己来实现一个each()方法,来遍历多维数组. <script charset=utf-8 type=text/javascript> /*var arr = [1,2,3,[4,[5]]]; arr.forEach(function(item,index,arr){ alert(item); }); */ //模拟ECMA forEach  循环遍历多维数组 var arr = [1,

jquery中object对象循环遍历的方法

一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下! 案例 我们看如下对象: ? 1 2 3 4 5 6 7 8 9 var data={   张三:69,   李四:72,   王五:90,   二麻子:88,   前端博客:100,   haorooms : 98,   王大壮:99 } 假如上面是后台返回的一个key

常用的循环遍历数据方法---迭代器模式

咱们在C#项目开发过程中,经常使用foreach的方式来循环遍历某个聚合对象:可能已有很多人遗忘了它的工作原理:今天,我们从这里开始:实际上它是把已经聚集好的一个集合,我们不需要知道其实际的对象类型而循环读取数据:这个地方就用到了我们今天要讲的设计模式---迭代器模式:有兴趣的同学,可以下来了解一下IEumerator 和IEnumerable 接口. 什么是迭代器设计模式?提供一种方法顺序访问聚合对象中的各个元素,并又不暴露其内部表示.  也就是说,我们需要访问一个聚合对象的数据时候.需要对聚

JavaScript 中的12种循环遍历方法

题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];for (let i=0; i<arr.length; i++){ console.log(i,arr[i])}// 0 1// 1 2// 2 3 for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历. 2.for in 循环 let obj = {name:'zhou',age:'**'}for(let i in obj){ con

JS完成页面跳转并传参的方法|附加:循环遍历对象

此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个参数用&隔开,下面传的参数为name=lemon,age=18--> <a href='page/index.html?name=lemon&age=18'></a> 当跳转到页面的时候这个页面的地址栏就会跟你写的那个一样,这时候你只需要获取地址栏的内容并进行采取

C++11新增for循环遍历方法

记录C++11新增for循环遍历方法 1.基于迭代器的for循环: for_each位于std命名空间下,我们可以看到其定义如下: inline _Fn1 for_each(_InIt _First, _InIt _Last, _Fn1 _Func) { // perform function for each element _DEBUG_RANGE(_First, _Last); _DEBUG_POINTER(_Func); _For_each(_Unchecked(_First), _Un

Python的list循环遍历中,删除数据的正确方法

在遍历list,删除符合条件的数据时,总是报异常,代码如下: 1 num_list = [1, 2, 3, 4, 5] 2 print(num_list) 3 4 for i in range(len(num_list)): 5 if num_list[i] == 2: 6 num_list.pop(i) 7 else: 8 print(num_list[i]) 9 10 print(num_list) 会报异常:IndexError: list index out of range 原因是在删