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

 2017年04月29日    2850     声明


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