DOM扩展的两个标准之一：Selectors API

Selectors API

介绍

selectors API Level 1的两个核心方法：
   querySelector() 和 querySelectorAll()
Element 和 Document类型的实例上都会暴露这两个方法

Selector API Level 2 在Element类型上新增的方法:（例如下一行的三个）
   matches()、find()、findAll()
   find()、findAll()目前还没有游览器实现和宣称

使用

上述提到的方法使用时都是接收CSS选择符参数，返回匹配模式下的相应元素

1.querySelector()：

解释：

  接收CSS选择符参数，返回匹配模式下的第一个后代元素。

用法：

  1.取得< body >元素：

let body = document.querySelector("body");

  2.取得ID为"myDiv"的元素：

let myDiv = document.querySelector("#myDiv");

  3.取得类名为"selected"的元素：

let selected = document.querySelector(".selected");

  4.取得类名为"button"的img元素：

let selected = document.querySelector("img.button");

2.querySelectorAll()

解释/用法：

  接收CSS选择符参数，返回匹配模式的所有元素节点，（并且返回一个NodeList的静态实例）–补充：返回的NodeList的对象可以通过 for-of、item()和中括号法来取到个别元素。

举例：

  1.取得ID为"myDiv"的元素中所有的< em >元素:

let ems = document.getElementById("myDiv").querySelectorAll("em");

  2.取得所有类名为"selected"的元素：

let selecteds = document.querySelectorAll(".selected");

  3.取得所有是< p >元素子元素的< strong >元素：

let strongs = document.querySelectorAll("p strong");

3.matches()

解释/用法：

  方便检验某个元素会不会被 querySelector()和querySelectorAll()返回。
传入CSS选择符参数，如果元素匹配，则返回true，否则为false。

举例：

if(document.body.matches("body.page1")){
	//true
}