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 ...
随机推荐
- spring espect XX but YY
注入和查找问题 HSF Consumer bean, 注入的是beanName='实际接口名', type='HSFSpringConsumerBean', 造成Autowire时查询出来的类型不匹 ...
- css连续的纯数字或字母强制换行
white-space:normal; word-break:break-all; white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;w ...
- wget访问tomcat管理界面
tomcat已经部署了管理界面,通过如下命令,将tomcat的状态信息打印到status.xml文件中,对于不方便使用浏览器访问该页面的情况,还是很有用的. wget http://localhost ...
- PCB的版本控制
http://club.szlcsc.com/article/details_1783_1.html 转载自:http://www.amobbs.com/thread-5606014-1-1.html ...
- [转]jquery.pagination.js分页
本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...
- Linux 下 zip 文件解压乱码解决方案,ubuntu16.10亲测可用
文章来源: https://www.zhihu.com/question/20523036 今天邮件中收到了一个压缩文件,解压后却是乱码,从网上也找了几个方法,目前这个方法还是比较可靠的,如下所示: ...
- 解决MyEclipse报errors running builder ‘javascript validator’ on project
今天导入项目的时候,报了以下错误 MyEclipse测到功能代码变化(保存动作触发)就报错: errors running builder ‘javascript validator’ on proj ...
- .NET面试题3
1.什么是拆箱和装箱? 2.什么是箱子? 3.箱子放在哪里? 4.装箱和拆箱有什么性能影响? 5.如何避免隐身装箱? 6.箱子的基本结构? 7.装箱的过程? 8.拆箱的过程? 9.下面这段代码输出什么 ...
- [转].NET Core配置文件加载与DI注入配置数据
本文转自:http://www.cnblogs.com/skig/p/6079187.html .NET Core配置文件 在以前.NET中配置文件都是以App.config / Web.config ...
- php 设置虚拟目录
php 设置虚拟目录两个步骤,很简单. 第一,打开安装apache目录下的conf下面的httpd.conf文件. 找到IfModule 标记, 再它下面添加红色方框中的内容.注意不能少东西. ...