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 ...
随机推荐
- mysql中的 随机字符串的生成
方法1. SELECT SUBSTRING(MD5(RAND()),FLOOR(RAND()*26)+1,6) AS rand_str; 上诉示例产生的是:6位长度的随机字符串. 函数解释: rand ...
- jsplumb流程器使用3--connector
jsPlumb.getInstance内可以放一个对象 对象内可选地提供默认值: connector: 连接器(直线--a straight line, 贝塞尔曲线--a Bezier curv ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
- 10.23JS日记
1.逻辑运算 || && ! ||:遇到第一个为true的值就中止并返回 &&:遇到第一个为false的值就中止并返回,如果没有false值,就返回最后一个不是fa ...
- Magento2 php商城在windows10上安装
magento2 下载地址:https://github.com/magento/magento2/archive/develop.zip 参考地址: 版本要求 这个magento2 要选择好php ...
- 自定义标签tld的使用
在JSP中使用标签是很平常的事情,在制作自定义标签时,通常都需要写tld文件来定义标签的各种属性,对应的Java类,前缀等等.标签与tld文件紧紧相连,那么,到底应该怎么放置tld文件?在web.xm ...
- Event 事件
事件是建立在委托的基础之上的. http://www.cnblogs.com/lystory/p/5085786.html public class 事件参数 { public 事件参数(string ...
- springMvc入门--初识springMvc
springMvc是什么 springmvc是表现层的框架,是一个spring的表现层组件.是整个spring框架的一部分,但是也可以不使用springmvc.跟struts2框架功能类似.其中的mv ...
- yum 安装 php7 ,lamp ,以及安装swoole
1 更新yum yum update 2 安装依赖 yum -y install pcre* openssl* yum -y install gcc make gd-devel libjpeg-dev ...
- 洛谷1312 Mayan游戏
原题链接 讨厌这种大搜索题 基本就是模拟搜索,注意细节即可. 以下是我用的两个剪枝: 将块向左移的前提是左边为空,因为该题要求先右后左,所以若左边有块,那么在上一次搜索向右移的时候一定会搜过,且字典序 ...