javascript基础学习系列五百三十二：DOM 扩展

本章内容
 理解Selectors API
 使用HTML5 DOM 扩展
尽管DOM API 已经相当不错，但仍然不断有标准或专有的扩展出现，以支持更多功能。2008 年以
前，大部分浏览器对DOM的扩展是专有的。此后，W3C 开始着手将这些已成为事实标准的专有扩展编
制成正式规范。
基于以上背景，诞生了描述DOM扩展的两个标准：Selectors API 与HTML5。这两个标准体现了社
区需求和标准化某些手段及API 的愿景。另外还有较小的Element Traversal 规范，增加了一些DOM属性。
专有扩展虽然还有，但这两个规范（特别是HTML5）已经涵盖其中大部分。本章也会讨论专有扩展。
本章所有内容已经得到市场占有率名列前茅的所有主流浏览器支持，除非特别说明。
Selectors API
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。下面是一些例子：
// 取得元素
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()方法会抛出错误。