这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战
今天是DOM系列的最后一篇更文啦，所谓事不过三嘛哈哈，我们来聊聊DOM的扩展和演进。🧐🧐
DOM扩展
俺对扩展的理解就是能提高我们原本东西的健壮性，让它更好用。而DOM的扩展主要是以下两个标准：Selectors API和HTML5。还有较小的Element Travelsal规范和专有扩展。
Selectors API
- querySelector("CSS选择符")：返回匹配该模式的第一个后代模式。
- querySelectorAll("CSS选择符")：返回匹配的一个NodeList的静态实例。 Document类型和Element类型的实例都有暴露这两个方法，不同在于前者调用是从文档元素开始搜索，后者调用时从当前元素的后代中查询。
- matches("CSS选择符")：匹配则返回true,不匹配返回false。
HTML5
- CSS类扩展 方法：
- getElementsByClassName("包含一个或多个类名的字符串")：暴露在document对象和所有的HTML元素上，返回相应的NodeList实例。 属性：
- classList：一个DOMTokenList的实例，也具有length属性和可以使用item()或中括号来访问元素。还存在以下方法： （1）add("要添加的类名")：向类名列表添加指定的字符串值；
（2）containes("类名")：检测类名列表是否存在相应类，存在则返回true，否则返回false；
（3）remove("要移除的类名")：从类名列表移除相应的类；
（4）toggle("类名")：如果该类名在类名列表已存在，就删除；如果不存在的话，就添加进去。
- 焦点管理 document.activeElement：查询文档拥有焦点的元素；
document.hasFocus():查询文档是否获得了焦点。
- 插入标记
- innerHTML：返回元素所有后代的HTML字符串，也可以进行修改。
- outerHTML：返回调用它的元素及所有后代元素的HTML字符串，同样可以修改。 但这些存在一定的内存和性能问题，以及要防止跨站点脚本攻击（XSS）。
- scrollIntoView() 这个方法存在于所有HTML元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。
DOM演进
DOM2和DOM3是在DOM1定义的HTML和XML文档的底层结构之上加入了更多交互能力，提供了更高级的XML特性。它们是按照模块化的思路来制定标准的，这些模式如下：
- DOM core
- DOM HTML
- DOM Views
- DOM Events
- DOM Style
- DOM Travesal and Range
- DOM Mutation Observers
