document.querySelectorAll遍历(forEach小解)
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小解)的更多相关文章
- document.querySelectorAll遍历
document.querySelectorAll兼容性良好,在之前的项目中就其遍历方式出了错误,先做个小结: 1.for循环 传统遍历方法 for(var i= 0; i< document. ...
- 如何循环遍历document.querySelectorAll()方法返回的结果
使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* ...
- HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);
基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...
- Array.prototype.slice.call(document.querySelectorAll('a'), 0)
Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组. slice()方法 ...
- document.querySelector()和document.querySelectorAll()
HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...
- document.querySelectorAll() 与document.getElementTagName() 的区别
这个区别我估计大神都不知道,问题源于博主,细节被一个妹子发现的 事情经过是这样 <ul> <li>item</li> <li></li> & ...
- document.querySelectorAll() 兼容 IE6
不多说,直接上代码 // 使用 css 选择器获取元素对象 兼容性封装 Test Already. function getElementsByCss(cssStr){ if(document.que ...
- [19/03/12-星期二] 数组_遍历(for-each)&复制&java.util.Arrays类
一.遍历 for-each即增强for循环,是JDK1.5新增加的功能,专门用于读取数组或集合中所有的元素,即对数组进行遍历. //数组遍历 for-each public class Test_03 ...
- JS - 把类似document.querySelectorAll(".xxx")、document.getElementsByName("xxx")这种方法的返回结果转换成数组对象
var btns = document.querySelectorAll(".btn");console.log(btns instanceof Array); // falseb ...
随机推荐
- 苹果4S
港版.4S.白.非翻新机.16G.联通3G移动2G电信2G 1000 美版.4S.白.翻新.16G.联通3G移动2G电信3G 980
- JPA EntityManagerFactory Vs Hibernate’s SessionFactory
JPA使用EntityManagerFactory开闭session,而Hibernate使用SessionFactory开闭session.两者区别: 1. EntityManagerFactory ...
- 如何安全退出已调用多个Activity的Application?
如何退出Activity?如何安全退出已调用多个Activity的Application? 退出Activity直接调用finish()方法 //用户点击back键就是退出一个Activity 退出 ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- MVC3+EF4.1学习系列(二)-------基础的增删改查和持久对象的生命周期变化
上篇文章中 我们已经创建了EF4.1基于code first的例子 有了数据库 并初始化了一些数据 今天这里写基础的增删改查和持久对象的生命周期变化 学习下原文先把运行好的原图贴来上~~ 一.创建 ...
- [ An Ac a Day ^_^ ] CodeForces 659D Bicycle Race 计算几何 叉积
问有多少个点在多边形内 求一遍叉积 小于零计数就好了~ #include<stdio.h> #include<iostream> #include<algorithm&g ...
- Python多进程multiprocessing使用示例
mutilprocess简介 像线程一样管理进程,这个是mutilprocess的核心,他与threading很是相像,对多核CPU的利用率会比threading好的多. import multipr ...
- Openjudge-计算概论(A)-单词倒排
描述: 编写程序,读入一行英文(只包含字母和空格,单词间以单个空格分隔),将所有单词的顺序倒排并输出,依然以单个空格分隔. 输入输入为一个字符串(字符串长度至多为100).输出输出为按要求排续后的字符 ...
- Openjudge-计算概论(A)-分数求和
描述: 输入n个分数并对他们求和,并用最简形式表示.所谓最简形式是指:分子分母的最大公约数为1:若最终结果的分母为1,则直接用整数表示. 如:5/6.10/3均是最简形式,而3/6需要化简为1/2, ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...