技術標籤：js紅寶石書# 15章jsjavascriptdom

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的靜態例項）

舉例：

  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
}