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数

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数

使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* Will Not Work */ document.querySelectorAll('.module').forEach(function() { }); 执行上面的代码,你将会得到执行错误的异常信息.这是因为,document.querySelectorAll()返回的不是一个数组,而是一个No

DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,SelectorsAPILevel 1的核心是两个方法:querySelector()和querySelectorAll(),可以通过Document及Element类型的实例调用他们. querySelector()方法接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回nul

jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. ☑ <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 ☑ 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. ☑ &l

一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> <img id="inside"> <div class="lonely"></div> <div class="outer"> <div class="inner"><

使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentFragment和Element追加了querySelector和querySelctorAll,原型为Element? querySelector(DOMString selectors)和 NodeList querySelectorAll(DOMString selectors),说明了匹配的算

Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素,如例: <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div>

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 1.用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. element = document.querySelector('selectors'); elementList = document.qu

基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySelector得到一个DOM var element = document.querySelector('#container');//返回id为container的dom var element = document.querySelector('div#container');//返回id为contai

for循环 JavaScript 提供多种遍历语法.最原始的写法就是for循环.(假设myArray是数组,下面同理) let arr = [1,2,3,4,5]; for (var index = 0; index < arr.length; index++) { console.log(myArray[index]); // 1 2 3 4 5 }  缺点:这种写法比较麻烦 forEach 数组提供内置的forEach方法 let arr = [1,2,3,4,5]; arr.forEach

1. for...in 用于对数组或者对象的属性的可枚举属性进行循环操作.注意该对象来自原型链上的可枚举属性也会被循环.下面看例子 var arr = ["lee","hello","zhangsan"];for(var i in arr) { console.log(arr[i]);//lee hello zhangsan}数组也是对象 也可以添加自己的属性 我们为arr添加一个name属性 arr.name = “安妮宝贝” for(var

原生JavaScript 遍历 1.for 循环遍历 let array1 = ['a','b','c']; for (let i = 0;i < array1.length;i++){ console.log(array1[i]); // a b c } 2.JavaScript 提供了 foreach()  map() 两个可遍历 Array对象 的方法 forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致:   Array.forEach(function(value

1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { console.log(array[i]); } 2.for in 遍历对象 不要用for in遍历数组,因为还会打印自定义属性和继承属性 一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性 数组的key是string类型,因为js中一切皆为对象. var array =

HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class(,),标签,就像jquery选择器,参数需要是合法的CSS选择语法. 用起来更方便的从DOM中选取元素,功能类似于jquery的选择器,这样在写原生js代码的时候就方便了许多. document.querySelector() 返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点

一.遍历API(2个) 1.深度优先原则遍历NodeIterator 节点迭代器 创建遍历API对象: var iterator=document.createNodeIterator(开始的父节点对象,whatToShow,null,false); whatToShow: NodeFilter.SHOW_ELEMENT(遍历元素节点) NodeFilter.SHOW_ALL(遍历所有) 用while循环,反复调用iterator.nextNode()方法 只要nextNode(),就向下一个移

map.filter.forEach.every.some http://www.runoob.com/jsref/jsref-obj-array.html 1.在字符串中使用 map 在一个String上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组: var map = Array.prototype.map var a = map.call("Hello World", function(x) { return x.charCodeAt(0); }) /

for循环  1.for有三个表达式:①声明循环变量:②判断循环条件:③更新循环变量:三个表达式之间,用;分割, for循环三个表达式都可以省略,但是两个“;”缺一 不可. 2.for循环的执行特点:先判断再执行,与while相同 3.for循环三个表达式都可以有多部分组成,第二部分多个判断条件用&& ||连接,第一三部分用逗号分割: for(var num = 1;num<10;num++){ console.log(num);//1,2,3,4,5,6,7,8,9 } while

1. querySelectorAll 该函数返回的对象类型为NodeList,这个类型并没有indexOf方法,如果需要使用indexOf方法,需要先将该对象每一项转存入Array对象中,然后就可以使用indexOf方法了 2. 场景 对querySelectorAll返回的所有进行进行click事件注册时,在事件处理程序中,如果想判断当前元素在总列表中的索引,这时就需要用到indexOf,但是因为NodeList对象没有该接口,建议对事件进行注册之前,遍历的元素先改为Array类型,然后对A

因为NodeList对象是一个类似数组的对象, 且它自带了一个 forEach() 方法, 因此可以使用 forEach() 遍历, 它的用法和 Array 里面的 forEach() 是完全一样的. document.querySelectorAll('li').forEach((item,i,obj)=>{console.log(i + " - " + item.textContent)}) 这里的item为当前元素, i为索引, obj为整个NodeList.