DOM(三):querySelector和querySelectorAll
querySelector()方法
querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。
//取得body元素
var body = document.querySelector('body');
//取得id为'myDiv'的元素
var myDiv = document.querySelector('#myDiv');
//取得类为'selected'的第一个元素
var selected = document.querySelector('.selected');
//取得类为'button'的第一个图像元素
var img = document.querySelector('img.button');
querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个css选择服,但返回的是所有匹配的元素而不仅仅是一个元素。
这个方法返回的是一个NodeList实例
//取得某<div>中的所有<em>元素(类似于getElementsByTagName('em'))
var ems = document.getElementById('myDiv').querySelectorAll('em'); //取得类为'selected'的所有元素
var selecteds = document.querySelectorAll('.selected'); //取得所有<p>元素的所有<strong>元素
var strongs = document.querySelectorAll('p strong');
要取得返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法
var i,len,strong;
for(i=0; len=strongs.length; i<len; i++){
strong = strongs[i]; //或者strongs.item(i)
strong.className = 'import';
}
DOM(三):querySelector和querySelectorAll的更多相关文章
- DOM API querySelector与querySelectorAll的用法
DOM API querySelector与querySelectorAll的用法: http://www.qttc.net/201309371.html querySelectorAll与quer ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll
使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...
- 原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javascript DOM扩展querySelector()和和querySelectorAll()
选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- querySelector和querySelectorAll方法介绍
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOM ...
随机推荐
- 5.SpringMVC
1.SpringMVC概述 概述: SpringMVC是基于请求驱动,围绕一个核心Servlet 转发请求到对应的Controller而设计的优点:是一个典型的教科书式的MVC构架,易学易用提供了清晰 ...
- The 'gridview' module MUST be setup in your Yii configuration file.
解决方法:common的config的main.php中添加 'gridview' => ['class' => 'kartik\grid\Module'], 在vender的compos ...
- 信息领域热词分析系统--python过滤
利用python过滤去没用的词语,过滤的词语存储在停用文件中. #创建停用词表 def stopwordlist(): stopwords=[line.strip() for line in open ...
- leetcode 620. Not Boring Movies 用where语句判断
https://leetcode.com/problems/not-boring-movies/description/ 不管题目简不简单,现在先熟悉语法. 直接用where语句判断即可,判断奇偶可以 ...
- (转)blkid命令 获取文件系统类型、UUID
blkid命令 获取文件系统类型.UUID 原文:http://www.cnblogs.com/dkblog/archive/2011/08/30/2159630.html 在Linux下可以使用b ...
- idea编译golang插件总结
由于使用习惯了Idea 和vim插件.于是下载了idea的go插件并安装,可惜不支持go1.4 ,官方的go插件版本太低 133.326 — 133.9999 .只能手动编译 按照这个教程就可以 ht ...
- HDU 5336——XYZ and Drops——————【广搜BFS】
XYZ and Drops Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- jquery截取、判断字符串的长度,中英文都可
计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) String.prototype.len=function(){return this.replace([^\x00-\xff]/g,& ...
- 对于ESP、EBP寄存器的理解
原文:http://blog.csdn.net/yeruby/article/details/39780943 esp是栈指针,是cpu机制决定的,push.pop指令会自动调整esp的值: ebp只 ...
- hystrix应用介绍(三)
hystrix提供了两种隔离策略:线程池隔离和信号量隔离.hystrix默认采用线程池隔离. 1.线程池隔离 不同服务通过使用不同线程池,彼此间将不受影响,达到隔离效果. 例如: 我们可以通过andT ...