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

  

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

  1. php中遍历数组的方法

    参考网址:http://www.jb51.net/article/29949.htm 这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为 ...

  2. java基础29 迭代器 listIterator() 及各种遍历集合的方法

    listIterator() 迭代器包含了 Iterator() 迭代器中的所有方法. 1.ListIterator的常用方法 hasPrevious() :判断是否还有上一个元素,有则返回true  ...

  3. java 遍历map的方法

    package com.jackey.topic; import java.util.ArrayList;import java.util.HashMap;import java.util.Itera ...

  4. JS - 把类似document.querySelectorAll(".xxx")、document.getElementsByName("xxx")这种方法的返回结果转换成数组对象

    var btns = document.querySelectorAll(".btn");console.log(btns instanceof Array); // falseb ...

  5. document.querySelectorAll遍历(forEach小解)

    document.querySelectorAll兼容性良好,在之前的项目中就其遍历方式出了错误,先做个小结: 1.for循环 传统遍历方法 for(var i= 0; i< document. ...

  6. document.querySelectorAll遍历

    document.querySelectorAll兼容性良好,在之前的项目中就其遍历方式出了错误,先做个小结: 1.for循环 传统遍历方法 for(var i= 0; i< document. ...

  7. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  8. JavaScript 中的常用12种循环遍历(数组或对象)的方法

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...

  9. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

随机推荐

  1. Linux 命令 - umask: 显示或设置文件模式掩码值

    umask 命令控制着创建文件时指定给文件的默认权限.它使用八进制表示法从文件模式属性中删除一个位掩码. 参见下面的例子: [huey@huey-K42JE cmdline]$ rm -f foo.t ...

  2. Arnold+Shave 渲染毛发

    Arnold是一款基于真实物理光照算法和光线追踪算法的照片级渲染器,参与过多部好莱坞大片的制作,公司官网是:www.solidangle.com,官网上有很多效果图: 这里自己用一个球体测试了一下效果 ...

  3. SQL Server 编程入门经典(3)之T-SQL基本语句

    本章内容简介: 如何从数据库检索数据(SELECT) 如何向表中插入数据(INSERT) 如何适当更新数据(UPDATE) 如何删除表中数据(DELETE) 3.1 基本SELECT语句  如果你在此 ...

  4. sqlserver 公有表达式

    了解通用表达式: 为了让代码简洁:在一个查询中引用另外的结果集都是通过视图而不是子查询来进行分解,但是视图是系统级对象,如果数据集仅仅需要在存储过程或是自定义函数中使用一次的话,使用view有些奢侈哈 ...

  5. centos6.5下逻辑卷操作

    1.将两块独立磁盘分别分区 2.创建物理卷-pvcreate 3.创建卷组 4.创建逻辑卷 5.格式化逻辑卷 6.扩展逻辑卷 7.缩小逻辑卷

  6. php如何判断是否为json数据(格式)

    首先要记住json_encode返回的是字符串, 而json_decode返回的是对象. 判断数据不是JSON格式:  代码如下 复制代码 function is_not_json($str){    ...

  7. easyui扩展-日期范围选择.

    参考: http://www.5imvc.com/Rep https://github.com/dangrossman/bootstrap-daterangepicker * 特性: * (1)基本功 ...

  8. 关于arcgis发布wfs问题

    博客地址http://www.cnblogs.com/shizhongtao/p/3453594.html 官方文档中有这么一段描述: 从地图创建 WFS 服务 您 可以从 ArcMap 地图文档 ( ...

  9. will VS be going to

    1.Future - Will vs. Going to 2."Will be doing" vs. "will do" 3.Simple Future

  10. Qt绘制异形窗体

    异形窗体即不规则窗体,一般采用png图片,一般绘制异形窗体分两步: 1.设置遮罩区 2.绘制图片   使用png图片的透明部分作为遮罩区,然后绘制图片,这样我们就看到一个只绘制了非透明部分的图形,废话 ...