querySelector()
及querySelectorAll()
是Document
DOM对象及其子对象Element
中的方法,该方法基于CSS 选择器查找DOM元素,并返回选择器所匹配到的元素。
1. 方法介绍
1.1 querySelector()
var element = document.querySelector(selectors)
返回文档中匹配指定的选择器所匹配到。其中:
selectors
是一个字符串,包含一个或是多个 CSS 选择器,多个以逗号分隔element
,返回值是一个element
对象(DOM元素)。当没有返回值时,则返回null
在使用选择器方法时,应注意以下几点:
- 如果没有找到匹配元素,则返回
null
;如果找到多个匹配元素,则返回第一个匹配到的元素 - 如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。
- 所传入的选择器字符串参数必须符合 CSS 语法。如果指定的选择器不合法,则抛出
SYNTAX_ERR
异常
1.2 querySelectorAll()
var elementList = document.querySelectorAll(selectors);
selectors
是一个字符串,包含一个或是多个 CSS 选择器,多个以逗号分隔elementList
,返回值是一个NodeList
元素列表。
2. CSS选择器及元素查找
CSS 选择器在Selectors API
规范中定义,该规范通过不同的规则对DOM元素进行匹配,并对符合匹配规则的元素应用选择器所对应的样式。
选择器方法querySelector()
和querySelectorAll()
同样利用CSS选择器匹配规则,返回符合匹配规则的元素。
2.1 标签选择器(Tag Selectors)
在样式表中,标签选择器以元素标签名命名。
如:对于如下CSS代码:
strong { color: red; }
上面代码在CSS术语中被称为一条规则(rule),该选择器是一个名strong
的标签选择器(CSS规范中称之为类型选择器(type Selector)),会对所有名为strong
的HTML标签应用,花括号中的样式声明(declaration)。
该样式会应用于以下HTML中所有的strong
代码:
<strong>会在这里生效</strong> <p class="key"></p> <strong>也会在这里生效</strong>
在JS中使用标签选择器查找元素时,如,文档中的strong
元素时,可以通过以下代码:
var element = document.querySelector("strong"); // 查找首个元素 console.log(element); // <strong>会在这里生效</strong> var elementList = document.querySelectorAll("strong"); // 查找所有strong元素 console.log(elementList); // [strong, strong]
2.2 类选择器(Class Selectors)
通过设置元素的class
属性,可以为元素指定类名。文档中的多个元素可以拥有同一个类名。
在样式表中,类选择器是以英文句号(.
)开头。
如,对于以下样式表:
.key { color: green; }
以上规则,可以匹配所有class="key"
(或class
中包含key
类)的元素。
如,可以匹配以下两种情况:
<!--可以匹配--> <p class="key"></p> <!--也可以匹配--> <p class="key other-key"></p>
在通过类选择器查找元素时,可以像下面这样:
var element = document.querySelector(".key"); console.log(element); // <p class="key"></p>
2.3 ID选择器(ID Selectors)
通过设置元素的id
属性,可以为元素指定ID。文档中每个元素的ID必须是唯一的。
在样式表中,类选择器是以英文井号(#
)开头。
如,对于以下样式表:
#title { font-weight: bolder; }
以上规则,可以匹配id="title"
的元素。
如,可以匹配以下两种情况:
<p id="title"></p>
在JS中通过ID选择器查找元素时,可以像下面这样实现:
var element = document.querySelector("#title"); console.log(element); // <p id="title"></p>
2.4 伪类选择器(Pseudo-classes Selectors)
CSS伪类(pseudo-class)是添加在选择器后面的、用来指定元素状态的关键字。比如,:hover
会在鼠标悬停在选中元素上时应用相应的样式。
伪类和伪元素(pseudo-elements)不仅可以为符合文档树结构的元素指定样式,还可以为符合某些外部条件的元素指定样式。如:通过:visited
可以设置已访问过元素的样式、:checked
可以设置已选中元素的状态、:hover
可以设置鼠标悬停时选中元素的样式。
伪类样式语法结构如下:
selector:pseudo-class { property: value; }
以下是一些伪类的简单介绍:
:link
- 用来匹配元素当中的链接如:
a:link {color: slategray;}
:visited
- 用来匹配元素当中已访问过的链接如:
a:visited { color: #4b2f89; }
:active
- 用来匹配元素当中激活状态(鼠标悬停)的链接如:
a:active {color: blue;}
:hover
- 用来匹配元素当中未激活状态的链接如:
a:hover {color: blue;}
注意:连接元素各状态的应用优先级是
:link — :visited — :hover — :active
:focus
- 匹配当元素成为焦点时生效,用户可以通过键盘或鼠标激活焦点(如:表单输入)如:
.first-name:focus { color: red; }
:first-child
- 匹配一组兄弟元素中的第一个元素如,以下样式:
span:first-child { background-color: lime; }
会对下面两组
span
中的第一组应用样式:<div> <span>样式会在这里生效</span> <span>而这里不会生效</span> </div>
:nth-child(an+b)
- 匹配文档树中在其之前具有an+b-1
同级节点的元素,n
的给定值应该大于等于0,并且具有父元素如:
tr:nth-child(2n+1) // 表示表格中的奇数行 tr:nth-child(odd) // 表示表格中的奇数行 tr:nth-child(2n) // 表示表格中的偶数行 tr:nth-child(0n+1) // 与:first-child作用相同
:nth-last-child(an + b)
- 匹配在文档树中后面有an+b-1
个兄弟元素的元素,此时n
大于或等于0,并且该元素具有父元素。如:
tr:nth-last-child(-n+4) // 匹配表格中的最后四行
:nth-of-type(an+b)
- 匹配在文档树中具有之前具有相同元素名称的+b-1
兄弟元素的元素,n
给定值应该是正值或0,并且具有父元素:first-of-type
- 匹配父元素的所有该子元素类型中第一个出现的元素如:
div :first-of-type { background-color: lime; }
:last-of-type
- 匹配元素的所有子元素列表中,最后一个指定类型的元素如:
p em:last-of-type { color: lime; }
:empty
- 匹配没有子元素的元素:target
- 用于匹配URI中的ID标识(即:锚点)部分:checked
- 用于匹配选中状态的元素:enabled
- 用于匹配启用状态的元素:disabled
- 用于匹配禁用状态的元素
通过JS方法查找元素时,也可以通过添加伪类选择器,以更精确的匹配元素:
document.querySelector('span:first-child'); // 查找第一个span元素 document.querySelector("strong:last-of-type"); // 查找首个元素 document.querySelector("div:empty"); // 查找没有子元素的div元素
2.5 选择器组合与关系
选择器的优先级
当多于一个规则匹配到同一个元素时,CSS规定拥有更高确定度的选择器优先级更高。
ID选择器比类选择器具有更高的优先级, 而类选择器比标签选择器具有更高的优先级。
ID Selectors > Class Selectors > Tag Selectors
如果样式中包含冲突的规则,且它们具有相同的优先级。那么,后出现的规则优先级更高。
选择器的组合与关系
选择器也可以组合使用,以便更精确的匹配元素。
如,匹配包含.key
类的p
标签,可以通过以下方式指下:
p.key { color: red; }
还可以通过方括号指定其它属性,如:通过[type='button']
可以匹配type
属性为button
的元素。
在JS元素查找方法中组合使用选择器时:
document.querySelector("p.key");
基于关系的选择器
通过组合和关系,可以更精确的匹配元素。以下是一些常用的基于关系的选择器:
A B
- 匹配A元素中的子元素B,B可以是A的子节点及子节点的子节点如,匹配
p
元素中的所有span
子元素:p span { color: red; }
A > B
- 匹配A元素中的下级子元素B,即:匹配A的直系后代A + B
- 匹配A元素中的任一下一个兄弟元素B(同级)B ~ E
- 匹配B元素后面的拥有共同父元素的兄弟元素E
关系选择器中同样也可用于JS选择器方法中:
document.querySelectorAll("div span"); // 查找div 中所有的span子元素 document.querySelectorAll("div > span"); // 查找div 中所有的直系span子元素