尽管 DOM API 已经相当不错，但仍然不断有标准或专有的扩展出现，以支持更多功能。2008 年以 前，大部分浏览器对 DOM 的扩展是专有的。此后，W3C 开始着手将这些已成为事实标准的专有扩展编 制成正式规范。 本章所有内容已经得到市场占有率名列前茅的所有主流浏览器支持，除非特别说明。
JavaScript 库中最流行的一种能力就是根据 CSS 选择符的模式匹配 DOM 元素。比如，jQuery 就完全 以 CSS 选择符查询 DOM 获取元素引用，而不是使用 getElementById()和 getElementsByTagName()。 Selectors API(参见 W3C 网站上的 Selectors API Level 1)是 W3C 推荐标准，规定了浏览器原生支 持的 CSS 查询 API。支持这一特性的所有 JavaScript 库都会实现一个基本的 CSS 解析器，然后使用已有 的 DOM 方法搜索文档并匹配目标节点。虽然库开发者在不断改进其性能，但 JavaScript 代码能做到的 毕竟有限。通过浏览器原生支持这个 API，解析和遍历 DOM 树可以通过底层编译语言实现，性能也有 了数量级的提升。 Selectors API Level 1 的核心是两个方法:querySelector()和 querySelectorAll()。在兼容浏 览器中，Document 类型和 Element 类型的实例上都会暴露这两个方法。 Selectors API Level 2 规范在 Element 类型上新增了更多方法，比如 matches()、find()和 findAll()。不过，目前还没有浏览器实现或宣称实现 find()和 findAll()。
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");在 Document 上使用 querySelector()方法时，会从文档元素开始搜索;在 Element 上使用 querySelector()方法时，则只会从当前元素的后代中查询。 用于查询模式的 CSS 选择符可繁可简，依需求而定。如果选择符有语法错误或碰到不支持的选择符， 则 querySelector()方法会抛出错误。
querySelectorAll()
querySelectorAll()方法跟 querySelector()一样，也接收一个用于查询的参数，但它会返回 所有匹配的节点，而不止一个。这个方法返回的是一个 NodeList 的静态实例。 再强调一次，querySelectorAll()返回的 NodeList 实例一个属性和方法都不缺，但它是一 个静态的“快照”，而非“实时”的查询。这样的底层实现避免了使用 NodeList 对象可能造成的性 能问题。 以有效 CSS 选择符调用 querySelectorAll()都会返回 NodeList，无论匹配多少个元素都可以。 如果没有匹配项，则返回空的 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";
}与 querySelector()方法一样，如果选择符有语法错误或碰到不支持的选择符，则 querySelector- All()方法会抛出错误。
标签：DOM,querySelectorAll,元素,扩展,js,选择符,let,querySelector,document From： https://blog.51cto.com/u_16298172/9400123