对前面的DOMapi进行补充（其实就是对document、Element增加了属性）目前已得到主流浏览器支持
1.Selectors API
根据选择器来匹配DOM元素
1.1.querySelector()
接受css选择符参数，返回匹配该模式的第一个后代元素，没有则为null
1.2.querySelectorAll()
接受css选择符参数，返回匹配该模式的所有后代元素组成的NodeList（静态），没有则返回空的NodeList
1.3.matches()
接受css选择符参数，如果调用元素匹配该选择符则返回true
2.元素遍历
由于Element节点的子元素可能包含Text、Comment类型，但是实际上的DOM操作更多是对后代Element元素进行操作，故此多了此部分标准
- children：HTMLCollection对象，只保存子树中的Element元素，如果子树中全是Element元素，则和childNodes相同
- childElementCount:返回子元素数量
- firstElementChild/lastElementChild:指向第一/最后一个子元素
- previousElementSibling/nextElementSibling：指向调用元素的前一个/后一个Element类型的同胞元素
- contains()：如果传入的元素位于调用元素的后代，则返回true
3.HTML5
之前的HTML只是一个纯标记语言，但是HTML5包含了与标记相关的大量JavascriptAPI定义，当然这只是其中一个区别
3.1.CSS类拓展
1.getElementsByClassName()
传入一个
一个或多个类名字符串，返回包含相应类的元素的NodeList(静态)，如果是多个，类名顺序无关紧要，但是必须包含所有类
<div class="username">name</div>
<div class="current username">currentUsername</div>
<script>
let currentUsernameElements = document.getElementsByClassName('username current');//顺序不会影响
console.log(currentUsernameElements.length); //1
</script>
2.classList属性
html元素可以通过空格分割多个类名字符串来一次性设置多个类，classList的出现就是为了方便添加、删除某个类，属性classList值是
DOMTokenList实例
属性
length：返回元素个数
方法
item():按索引获得元素，可以使用[]代替
add/remove(类名字符串):添加删除类
contains(类名字符串)：判断给定类名是否存在
toggle(类名字符串)：切换，如果类存在则删除，不存在则添加
3.2 焦点管理
document.activeElement保存着当前有有焦点的DOM元素，可以输入tab键或使用元素.focus()来设置其值并使得元素获得焦点
3.3 HTMLDocument拓展
由于document对象继承自HTMLDocument，所以是对document对象属性进行添加
- readyState属性：complete时为文档加载完成，loading表示正在加载
- compatMode属性：指示当前处于什么渲染模式，不重要
- head属性：指向head标签
- characterSet属性：文档编码方式
3.4自定义数据属性
按照标准，自定义属性开头为
data-名字，此命名的自定义属性能在对应节点的属性dataset中找到，这样就可以不需要像之前那样setAttribute()来设置自定义属性
<div class="current username" data-id="123" data-name-user="juejin">currentUsername</div>
<script>
let currentUsernameElements = document.getElementsByClassName('username current');
console.log(currentUsernameElements[0].dataset); //{id: '123', nameUser: 'juejin'}
</script>
- 注意data-之后的属性名，在dataset中是有变化的，比如上面的data-name-user，在dataset中是用驼峰命名nameUser替代的，所以访问的时候也需要变化
3.5插入标记
1.innerHTML属性
- 读取：返回调用元素后代的HTML字符串，包括元素、注释和文本节点
- 写入：根据提供的字符串值以新的DOM子树替换原本的所有节点，注意提供的任何值都会被解析成DOM树，如果值不包含任何HTML标签，则直接生成一个文本节点，如果写入的是script脚本，就可能导致攻击
2.innerText属性
- 读取：按照深度优先将子树的所有文本节点的值拼接起来
- 写入：将子树替换为包含该值的文本节点
3.outerHTML/outerText属性
比inner就是将调用元素本身也包含进内
4.insertAdjacentHTML()/insertAdjacentText()
接受位置字符串和要插入的HTML或文本，作用时将要插入的文本插入；到调用元素标签的不同位置
位置字符
- beforebegin：插入的文本在开始标签之前
- afterbegin：在开始标签之后
- beforeend：在结束标签之前
- afterend：在结束标签之后
其中的begin和end代表调用元素的标签，begin为开始标签，end为结束标签
5.内存与性能
因为插入之后都是要直接删掉原本的子树，所以与原本的子树中的元素相关的处理程序和js对象需要手动释放，不然可能造成内存泄漏
3.6 scrollIntoView()
将视口移动到调用此方法的元素所在位置，和锚效果差不多
接受参数
- alignToTop:ture代表滚动后元素的顶部与视口顶部对齐，false则是底部与视口顶部对齐，默认true
- scrollIntoViewOption：是一个选项对象
- behavior：可取值：smooth和auto，默认auto
- block：垂直方向对齐方式：start、center、end和nearest，默认start
- inline：水平，和上面一样，默认nearest
