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 ...
随机推荐
- 9.JSP进阶
1.JSP内置对象 JSP容器在_jspService()方法中声明并初始化9个内置对象. 名称 作用 接口/类 out 客户端打开的输出流 javax.servlet.jsp.JspWriter 接 ...
- 技巧:开启ubuntu系统桌面上的右键进入terminal命令行控制台功能
$ sudo apt-get install nautilus-open-terminal 执行上述命令,重启. 重启命令: $ sudo reboot 注意:需要联网
- PHP、thinkPHP5.0开发网站文件管理功能(三)编辑文件
public function edit(){ $file = iconv('UTF-8','GB2312',urldecode(input('file'))); if(empty($file)|| ...
- Oracle 12c DG备库Alert报错ORA-01110
环境是12.2.0.1 version, Oracle Data Guard备库近段时间一直报错,但是备库主库同步一致,数据一致. 2019-03-06T23:42:22.184048+08:00 E ...
- Android Studio配置及使用OpenCV
1.下载及目录介绍 进入官网(http://opencv.org/)下载OpenCV4Android并解压(这里是OpenCV-3.2.0-android-sdk).下面是目录的结构图: sdk ...
- 我想和你们说说java和C++___C加加
头痛头痛之一: java里面,本质上来说,一个类是一个程序员定义的类型,类是一种引用类型(reference type),这意味着该类类型的变量都可以引用该类的一个实例.从表面上,对象引用变量中似乎存 ...
- Murano Weekly Meeting 2015.12.01
Meeting time: 2015.December.1st 1:00~2:00 Chairperson: Nikolay Starodubtsev, from Mirantis Meeting ...
- (转)rsync数据备份方案
rsync数据备份方案 原文:http://blog.51cto.com/irow10/1826458 最近整理了下公司的数据备份情况.以下是部分操作的过程 1.rsync数据备份,具体备份过程就不详 ...
- PyCharm5 破解汉化
作者博文地址:https://www.cnblogs.com/liu-shuai/ 破解: 将下列序列号复制到软件激活界面即可破解. 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0 ...
- (转)python学习链接
原文:http://www.cnblogs.com/spykids/category/782491.html http://www.cnblogs.com/alex3714/category/7707 ...