querySelectorAll()方法
querySelectorAll()方法
调用的对象包括：Document（文档） DocumentFragment（文档片段） Element（元素）
querySelectorAll()方法接收的参数与querySelector()方法一样，也是一个css选择符，但返回的是所有匹配的元素，这个方法返回的是一个NodeList实例
返回的值是带有所有属性和方法的NodeList，而其底层实现则类似与一组元素快照，但是这个NodeList并不是动态的而是一个快照。
如果没有找到则会返回一个空的NodeList对象
要取得返回的NodeList中的每一个元素，可以使用item()方法
item方法是类数组的方法或者使用方括号语法
<body>
<p index='klkx'>456</p>
<a index='klkx' class='p1' id='p2'>123</a>
<div index='klkx' class='p1' id='p2'>789</div>
<script>
var s1 = document.querySelector('p[index]');
var s2 = document.querySelector('a.p1');//ID选择var s2 document.querySelector('div#p2');
var divs = document.querySelectorAll('div[index]'),
i,
len=divs.length;//
s1.style.color = 'red';
s2.style.color = 'yellow';
for (i=0;i<len;i++ )
{
divs[i].className = 'important';//divs.item(i).className = 'important';
}
</script>
</body>
querySelectorAll()方法的更多相关文章
- querySelectorAll 方法相比 getElementsBy 系列方法区别
最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别,一时没想起来说些什么,今天查下文档,总结一下它们的区别,以便自己理解. 1. W3C 标准queryS ...
- 如何循环遍历document.querySelectorAll()方法返回的结果
使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* ...
- querySelectorAll 方法相比 getElementsBy 系列方法有什么区别
感谢 http://www.zhihu.com/question/24702250 简生 的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API ...
- [label][转载][JavaSript]querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？
轉載出處: http://www.zhihu.com/question/24702250 querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName g ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- querySelector和querySelectorAll方法介绍
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOM ...
- javascript之 原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- IE6、IE7兼容querySelectorAll和querySelector方法-最终版本
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏 ...
- querySelectorAll 方法和 getElementsBy 系列方法的区别
本文是我在知乎上的一个回答:http://www.zhihu.com/question/24702250/answer/28695133 ————— 下面是正文 ————— 1. W3C 标准quer ...
随机推荐
- 2017-2018-2 20165315 实验二《Java面向对象程序设计》实验报告
2017-2018-2 20165315 实验二<Java面向对象程序设计>实验报告 一.实验内容及步骤 1.初步掌握单元测试和TDD 单元测试 任务一:三种代码 用程序解决问题时,要学会 ...
- Apache Commons configuration使用入门
使用Commons Configuration可以很好的管理我们的配置文件的读写, 官网:http://commons.apache.org/configuration 需要用到commons-la ...
- git bug修复
在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接到一个修复一个代号101的bug的任务时,很自然地,你想创建一个分支i ...
- sql重复数据的过滤问题
有重复数据主要有一下几种情况: 1.存在两条完全相同的纪录 这是最简单的一种情况,用关键字distinct就可以去掉 example: select distinct * from table(表名) ...
- Mercedes offline programming/coding tips and guides
Mercedes offline programming/coding recommendations and guides: Offline coding: SCN or CVN coding wa ...
- Scrapy-Redis分布式策略
Scrapy-Redis分布式策略 原理图: 假设有四台电脑:Windows 10.Mac OS X.Ubuntu 16.04.CentOS 7.2,任意一台电脑都可以作为 Master端 或 Sla ...
- SQL语句的三大类
数据定义语言(DDL Data Defination Language):用于创建和定义数据库对象,并且将对这些对象的定义保存到数据库字典中,通过DDL语句可以创建数据库对象.修改数据库对象.删除数据 ...
- Writing modular applications with laravel-modules
01-07-2016 Let me start by saying Laravel is an amazing framework. However when it comes to writing ...
- [ES]elasticsearch章１ ES各角色的分工
es集群里的master node.data node和client node到底是怎么个意思,分别有何特点? master节点 主要功能是维护元数据,管理集群各个节点的状态,数据的导入和查询都不会走 ...
- [Spark]What's the difference between spark.sql.shuffle.partitions and spark.default.parallelism?
From the answer here, spark.sql.shuffle.partitions configures the number of partitions that are used ...