CSS 选择器与JavaScript DOM元素查找方法 querySelector

 2017年04月29日    4945     声明


querySelector()及querySelectorAll()是DocumentDOM对象及其子对象Element中的方法，该方法基于CSS 选择器查找DOM元素，并返回选择器所匹配到的元素。

  1. 方法介绍
  2. CSS选择器及元素查找

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子元素