HTML5的JavaScript选择器介绍
在HTML5出现之前使用JavaScript查找DOM元素，有以下三种原生的方法：
- getElementById：根据指定元素的id属性返回元素
- getElementsByName：返回所有指定name属性的元素
- getElementsByTagName：返回所有指定标签的元素
HTML5新增的选择器，方法有两种：
- querySelector：根据选择器规则返回第一个符合要求的元素
- querySelectorAll：根据选择器规则返回所有符合要求的元素
支持新的HTML5 JavaScript选择器接口的浏览器有：IE 8+、FireFox 3.5+、Safari 3.2+、Chrome 4.0+、Oprea 10.1+ 。
一、选择器的分类
1. ID选择器
使用ID选择器时，需在前面添加“#”，区分大小写，语法如下：
document.querySelector('#id'); //等同于document.getElementById('id');
2. 元素选择器
元素选择器通过指定的标签查询元素，此时querySelectorAll等同于getElementsByTagName，语法如下：
document.querySelectorAll('a'); //获取页面上的所有a元素并返回元素
3. 样式类选择器
使用元素的样式类获取一个或一类元素，样式名字前使用“.”（英文句号）开头，语法如下：
document.querySelectorAll('.btn'); //获取所有样式类中包含btn类名的元素
4. 分组选择器
使用querySelectorAll不仅可以获取一个或一类元素，还可以同时获取其他类别元素，两种类型之间使用逗号隔开，语法如下：
document.querySelectorAll('a,p'); //获取页面上所有a元素和p元素，并通过一个列表返回
document.querySelectorAll('.btn,.txt'); //获取页面上所有包含btn和txt样式类名的元素
5. 属性选择器
获取页面上包含指定属性的元素，属性名称可以是元素原生属性和用户自定义属性，语法如下：
document.querySelectorAll('a[target="_blank"]'); //获取页面上所有target属性为_blank的a元素
document.querySelectorAll('img[data-id]'); //获取页面上所有带有自定义属性data-id的img元素
6. 后代选择器
主要用于选择作为某元素后代的元素，规则左边的选择器一端包含两个或多个用空格分隔的选择器，如div a可以理解为查找所有被div包围的所有a元素，语法如下：
document.querySelectorAll('div a'); //获取页面上所有被div包含的a元素
document.querySelectorAll('div .btn'); //获取页面上所有被div包含的带有btn样式类名的元素
7. 子元素选择器
后代选择器会将元素底下的所有相关元素都搜索出来，如果想进一步缩小范围，可以使用子元素选择器，只会选择某个元素的一级子元素，子元素用“>”（大于号）表示，代码如下：
<html>
<div id="first">
<div></div>
<div></div>
</div>
</html> <script>
document.querySelectorAll('html>div'); //只返回一个id为first的div元素
</script>
8. 相邻兄弟选择器（比较少用）
选择紧接在另一个元素后的元素，而且两者有相同的父元素，相邻兄弟选择器使用“+”（加号），代码如下：
<div>
<div></div>
<div></div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<script>
document.querySelectorAll('div+p'); //只返回一个id为p1的p元素
</script>
9. 伪类选择器
“:first-child”表示选择元素的第一个子元素，“:last-child”表示选择元素的最后一个子元素，“:nth-child(n)”表示选择元素的第n个子元素。“:first-child”的使用例子，代码如下：
<div>
<p id="p1"></p>
<p id="p2"></p>
</div> <script>
document.querySelectorAll('p:first-child'); //只返回一个id为p1的p元素
</script>
除了上述九种常用的选择方法外，还有很多其他更高级的选择器使用方法。
更多的选择器方法可参考jQuery的文档：地址是：http://api.jquery.com/category/selectors/。
原创文章，转载请注明出处：http://www.cnblogs.com/iyitong/p/4229355.html
HTML5的JavaScript选择器介绍的更多相关文章
- 使用HTML5的JavaScript选择器操作页面中的元素
<!doctype html><html lang="en"> <head> <meta charset="UTF-8& ...
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5&CSS3&JavaScript&PHP&MySQL学习笔记
1.在文字间添加一条水平线 使用<hr /> 注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...
- 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况
CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
随机推荐
- 第二天了，由于博主太分心了，看看就跑去研究了一下ssh和ufw以及nmap，现在急需记录一下啦，哈哈！
昨天看到了视频的ssh远程连接,因为我点电脑上装的是一个ubuntu的虚拟机,我根据视频看了一下,自己又试用了一下,我发现自己的ubuntu是能够远程到自己的Mac电脑上,一开始主要是因为自己不能连接 ...
- tomcat.apache startup.bat闪退两种解决方法
tomcat bin文件夹中的startup.bat闪退原因及解决方法两种 方法一:在启动tomcat时闪退,重新检查java的jre运行环境.如果环境变量忘记配置一定会导致了tomcat的闪退. 追 ...
- 使用docker搭建“企业级镜像仓库”Harbor
一.前沿 docker的官方镜像仓库registry,功能比较单一,不太好用,特别是删除镜像操作,不够友好. Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一 ...
- spring cloud 学习之服务消费者（Feign）
一.Feign简介 Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注 ...
- 多进程（multiprocessing module）
一.多进程 1.1 多进程的概念 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好 ...
- OpenStack Grizzly版本部署(离线)
参考原版地址:https://github.com/mseknibilel/OpenStack-Grizzly-Install-Guide 图转自原版地址 部署拓扑: 部署环境:vmware stat ...
- 使用MyEclipse/Eclipse修改项目名称报Can't convert argument: null！
报错: java.lang.IllegalArgumentException: Can't convert argument: null! 方法/步骤 报错原因:使用MyEclipse修改项目名 ...
- 深入理解PHP数组函数和预定义接口
一. PHP对数组的过滤 函数: array_filter(p1[,p2]) 参数p1是要过滤的数组,参数p2是自定义过滤会掉函数(可以是匿名函数) 例子: <?php $arr = ['',n ...
- 《算法》第四版 IDEA 运行环境的搭建
<算法>第四版 IDEA 运行环境的搭建 新建 模板 小书匠 在搭建之初,我是想不到会出现如此之多的问题.我看了网上的大部分教程,都是基于Eclipse搭建的,还没有使用IDEA搭建的教程 ...
- Python解压ZIP、RAR等常用压缩格式的方法
解压大杀器 首先祭出可以应对多种压缩包格式的python库:patool.如果平时只用基本的解压.打包等操作,也不想详细了解各种压缩格式对应的python库,patool应该是个不错的选择. pato ...