对DOM 的两个主要的扩展是Selectors API（选择符API）和HTML5。这两个扩展都源自开发社区，而将某些常见做法及API 标准化一直是众望所归。此外，还有一个不那么引人瞩目的Element Traversal（元素遍历）规范，为DOM添加了一些属性。虽然前述两个主要规范（特别是HTML5）已经涵盖了大量的DOM 扩展，但专有扩展依然存在。本章也会介绍专有的DOM扩展。
- 理解Selectors API
- 使用HTML5 DOM扩展
- 了解专有的DOM扩展
理解Selectors API
querySelector()
querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
css选择符有三种
- 标签（元素）选择符
- ID选择符
- 类选择符
querySelector
querySelector
querySelectorAll()
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一NodeList 的实例。要取得返回的NodeList 中的每一个元素，可以使用item()方法，也可以使用方括号语法。
NodeList[i]
NodeList.item(i)
querySelectorAll 1
querySelectorAll 2
matchesSelector()
这个方法接收一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false.
元素遍历
对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样，就导致了在使用childNodes 和firstChild 等属性时的行为不一致,为了弥补这一差异，而同时又保持DOM规范不变，Element Traversal 规范（www.w3.org/TR/ElementTraversal/）新定义了一组属性.
下面的属性都不会包括标签之间的文本节点
- childElementCount：返回子元素（不包括文本节点和注释）的个数。
- firstElementChild:指向第一个子元素。
- lastElementChild:指向最后一个子元素。
- previousElementSibling:指向前一个同辈元素。
- nextElementSibing:指向后一个同辈元素。
- OnePlus 5
- OnePlus 5T
- OnePlus 6
HTML5
与类相关的扩充1.getElementsByClassName()方法
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字串，返回带有指定类的所有元素的NodeList。
注意:因为getElementsByClassName是动态更新的属性方法，一旦更改了元素中的类名，原先获取到的对象就会失效
A B C
2. classList 属性
顾名思义就是类的目录和集合。返回一个元素的类属性的实时DOMTokenList集合.
HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。有一个表示自己包含多少元素的length 属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。
classList属性有如下方法
- add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
ABC
3.插入标记 innerHTML 属性
读模式：属性返回的是调用元素的所有子节点（包括元素、注释和文本节点）对应
的HTML 标记。
写模式：innerHTML属性会根据指定的值创建新的DOM树，然后用这棵DOM树完全代替调用原先的所有子节点。（可以插入元素标签和