在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选择器介绍的更多相关文章

  1. 使用HTML5的JavaScript选择器操作页面中的元素

    <!doctype html><html lang="en"> <head>     <meta charset="UTF-8& ...

  2. 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法

    前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...

  3. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

  4. HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

  5. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  6. 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况

    CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...

  7. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  8. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  9. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

随机推荐

  1. java基础 xml 使用dom4j解析 xml文件 servlet根据pattern 找到class

    package com.swift.kaoshi; import java.io.File; import java.util.List; import java.util.Scanner; impo ...

  2. 优化tableView性能（针对滑动时出现卡的现象）

    优化tableView性能(针对滑动时出现卡的现象) 在iOS应用中,UITableView应该是使用率最高的视图之一了.iPod.时钟.日历.备忘录.Mail.天气.照片.电话.短信. Safari ...

  3. 谷歌angle库使用心得

    通过谷歌的angle库可以在项目中,调用opengl接口渲染时,选择调用directx或者webgl来渲染,避免机器没有安装opengl驱动启动异常的问题. 这个库的使用可以不修改原有使用opengl ...

  4. jQuery、Angluar、Avalon对比

    最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助 这里主要是做一个简单的todolist 分别用三种不同的 ...

  5. MySQL选择的执行计划性能底下原因分析--实战案例分析

    MySQL是自动会选择它认为好的执行划,但是MySQL毕竟是程序,还没有达到像人类思考这么智能,还是通过一些按部就班的算法实现最优执行计划(基于cost)的选择.下面就是一个真实的案例,带你来看看My ...

  6. C++指针之间的赋值与转换规则总结

    C++指针之间的赋值与转换规则总结 Note:以下结论不适用于类的成员函数指针,关于类的成员函数指针会单独讨论. 一.任何类型的指针变量均可直接赋值给const void * 任何类型的非const指 ...

  7. MySQL优化总结-查询总条数

    1.COUNT(*)和COUNT(COL) COUNT(*)通常是对主键进行索引扫描,而COUNT(COL)就不一定了,另外前者是统计表中的所有符合的纪录总数,而后者是计算表中所有符合的COL的纪录数 ...

  8. python 学习心得

    多用类或是函数 我以前写的时候,不用函数,从头写到尾,后来,要改成函数,也是要花很多测试的时间,改的话还得一个调试,如果一开始就用函数的话,就能节省很多时间. 函数的功能尽可能的小 比如说像我用try ...

  9. [BZOJ3714]Kuglarz（最小生成树）

    Description 魔术师的桌子上有n个杯子排成一行,编号为1,2,-,n,其中某些杯子底下藏有一个小球,如果你准确地猜出是哪些杯子,你就可以获得奖品.花费\(C_{i,j}\)元,魔术师就会告诉 ...

  10. 笔记-爬虫-scrapy-srcapy-redis组件

    笔记-爬虫-scrapy-srcapy-redis组件 1.      简介 scrapy是一个爬虫框架,但不支持分布式,scrapy-redis是为了更方便的实现scrapy分布式爬虫的组件. 可以 ...