javascript基础学习系列五百三十三：querySelectorAll()

querySelectorAll()方法跟querySelector()一样，也接收一个用于查询的参数，但它会返回
所有匹配的节点，而不止一个。这个方法返回的是一个NodeList 的静态实例。
再强调一次，querySelectorAll()返回的NodeList 实例一个属性和方法都不缺，但它是一
个静态的“快照”，而非“实时”的查询。这样的底层实现避免了使用NodeList 对象可能造成的性
能问题。
以有效CSS 选择符调用querySelectorAll()都会返回NodeList，无论匹配多少个元素都可以。
如果没有匹配项，则返回空的NodeList 实例。
与querySelector()一样，querySelectorAll()也可以在Document、DocumentFragment 和
Element 类型上使用。下面是几个例子：
// 取得ID 为"myDiv"的

元素中的所有 元素
let ems = document.getElementById(“myDiv”).querySelectorAll(“em”);
// 取得所有类名中包含"selected"的元素
let selecteds = document.querySelectorAll(“.selected”);
// 取得所有是

元素子元素的元素
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”;
}
与querySelector()方法一样，如果选择符有语法错误或碰到不支持的选择符，则querySelector-
All()方法会抛出错误。
matches()
matches()方法（在规范草案中称为matchesSelector()）接收一个CSS 选择符参数，如果元素
匹配则该选择符返回true，否则返回false。例如：
if (document.body.matches(“body.page1”)){
// true
}
使用这个方法可以方便地检测某个元素会不会被querySelector()或querySelectorAll()方
法返回。
所有主流浏览器都支持matches()。Edge、Chrome、Firefox、Safari 和Opera 完全支持，IE9~11
及一些移动浏览器支持带前缀的方法。