document.querySelectorAll兼容性良好,在之前的项目中就其遍历方式出了错误,先做个小结:

1.for循环 传统遍历方法

for(var i= 0; i< document.querySelectopAll(".a").length; i ++){

document.querySelectopAll(".a")[i].style.color= "red";

}

2.forEach方法

forEach方法可以遍历一个js数组

var arr= [1, 2, 3];

arr.forEach(arr, function(pre){})

兼容性: 均兼容,IE低版本不兼容,本人使用的是IE9

若不兼容,可手动扩展:

详情:http://blog.csdn.net/oscar999/article/details/8671546

if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(" this is null or not defined");
}
var O = Object(this);
var len = O.length >>> ; // Hack to convert O.length to a UInt32
if ({}.toString.call(callback) != "[object Function]") {
throw new TypeError(callback + " is not a function");
}
if (thisArg) {
T = thisArg;
}
k = ;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}

如果这样使用:

document.querySelectorAll(".aa").forEach(function(){
    console.log("1")    
})

会报错,应为document.querySelectorAll(".aa")是一个NodeList数组,不是一般js数组!

可以借助call来实现

[].forEach.call(document.querySelectorAll(".aa"), function(){ 

  console.log("1")       

});

document.querySelectorAll遍历(forEach小解)的更多相关文章

  1. document.querySelectorAll遍历

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

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

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

  3. HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

    基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...

  4. Array.prototype.slice.call(document.querySelectorAll('a'), 0)

    Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组. slice()方法 ...

  5. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  6. document.querySelectorAll() 与document.getElementTagName() 的区别

    这个区别我估计大神都不知道,问题源于博主,细节被一个妹子发现的 事情经过是这样 <ul> <li>item</li> <li></li> & ...

  7. document.querySelectorAll() 兼容 IE6

    不多说,直接上代码 // 使用 css 选择器获取元素对象 兼容性封装 Test Already. function getElementsByCss(cssStr){ if(document.que ...

  8. [19/03/12-星期二] 数组_遍历(for-each)&复制&java.util.Arrays类

    一.遍历 for-each即增强for循环,是JDK1.5新增加的功能,专门用于读取数组或集合中所有的元素,即对数组进行遍历. //数组遍历 for-each public class Test_03 ...

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

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

随机推荐

  1. 设计新Xlator扩展GlusterFS[转]

    原文:http://www.linuxidc.com/Linux/2013-08/89105.htm 1. GlusterFS概述 GlusterFS是一个开源的分布式文件系统,具有强大的Scale- ...

  2. HTML5根据浏览器获取经度和纬度(百度API)

    网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...

  3. Windows系统顽固文件删除方法

    con nul都是windows的设备,默认是不允许删除的,如果你一定要删除,可以按照以下方法进行删除!新建一个记事本输入一下内容(直接复制即可)DEL /F /A /Q \\?\%1 RD /S / ...

  4. Centos虚拟机安装分区分配

    i 安装hadoop虚拟机

  5. 【Loadrunner】初学Loadrunner——参数化设置(Table类型关联数据库)

    参数化输入是Loadrrunner里面一个强大的功能,属于Loadrunner的高级使用技巧. 我们在登录系统的时候,需要输入一组定义的用户名和密码,比如有5个虚拟用户同时登陆系统,则这五个用户都用这 ...

  6. js 弹出 隐藏层和cookie

    <script type="text/javascript"> function checkCookie(show_div, bg_div) { var smtstk ...

  7. javascript动画效果之多物体透明度

    html和css 仅为布局,需要注意的是filter对应的是老版本的ie浏览器透明度,而opacity对应的其他浏览器的透明度 filter: alpha(opacity: 50); opacity: ...

  8. NYOJ-71 独木舟上的旅行 (贪心)

    独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客 ...

  9. php 创建文件

    $myfile = fopen("newfile.txt", "w") or die("Unable to open file!"); $t ...

  10. Codeforces Round 371 Div2 B.Passwords

    原题: B. Passwords time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...