概述
【前言】：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/。
最后
以上就是激动跳跳糖为你收集整理的第五课：Js选择器方法汇总及实战（Salesforce常用）的全部内容，希望文章能够帮你解决第五课：Js选择器方法汇总及实战（Salesforce常用）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复