Selectors 选择器querySelector() querySelector() 方法接收 CSS 选择符参数，

querySelector()

querySelector() 方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回 null 。

// 取得<body>元素
let body = document.querySelector("body");
// 取得 ID 为"myDiv"的元素
let myDiv = document.querySelector("#myDiv");
// 取得类名为"selected"的第一个元素
let selected = document.querySelector(".selected");
// 取得类名为"button"的图片
let img = document.body.querySelector("img.button");

querySelectorAll()

querySelectorAll() 方法跟 querySelector() 一样，也接收一个用于查询的参数，但它会返回所有匹配的节点，而不止一个。这个方法返回的是一个 NodeList 的静态实例。与 querySelector() 一样querySelectorAll() 也可以在 Document 、 DocumentFragment 和Element 类型上使用。

// 取得 ID 为"myDiv"的<div>元素中的所有<em>元素
let ems = document.getElementById("myDiv").querySelectorAll("em");
// 取得所有类名中包含"selected"的元素
let selecteds = document.querySelectorAll(".selected");
// 取得所有是<p>元素子元素的<strong>元素
let strongs = document.querySelectorAll("p strong");
//返回的 NodeList 对象可以通过 for-of 循环、 item() 方法或中括号语法取得个别元素。比如：
let strongElements = document.querySelectorAll("p strong");
// 以下 3 个循环的效果一样
for (let strong of strongElements) {
	strong.className = "important";
}
for (let i = 0; i < strongElements.length; ++i) {
	strongElements.item(i).className = "important";
}
for (let i = 0; i < strongElements.length; ++i) {
	strongElements[i].className = "important";
}

matches()

matches() 方法（在规范草案中称为 matchesSelector() ）接收一个 CSS 选择符参数，如果元素匹配则该选择符返回 true ，否则返回 false 。例如：

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

使用这个方法可以方便地检测某个元素会不会被 querySelector() 或 querySelectorAll() 方法返回。所有主流浏览器都支持 matches() 。Edge、Chrome、Firefox、Safari 和 Opera 完全支持，IE9~11 及一些移动浏览器支持带前缀的方法。