Seletors API
Selectors API Level 1的核心是两个方法：querySelector()和querySelectorAll()。在兼容浏览器中，Document类型和Element类型的实例上都会暴露这两个方法。
Selectors API Level 2规范在Element类型上新增了更多方法，比如matches()，find()和findAll()。不过还没有浏览器实现find()和findAll()。
1.querySelector()
这个方法接受CSS选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回null。
let body = document.querySelector('body');
let myDiv = document.querySelector('#myDiv');
let selected = document.querySelector('.selected');
let img = document.querySelector('img.button');
2.querySelectAll()
和上面的方法一样，也接收一个用于查询的参数，但会返回所有的节点，返回的是一个NodeList静态实例。返回的NodeList对象可以通过for-of循环、item()方法和中括号取得个别元素。let ems = document.getElementById('myDiv').querrySelectAll('em');
3.match
matches()方法接受一个CSS选择符参数，如果匹配返回true否则返回false。使用这个方法可以方便地检测某个元素会不会被前两个方法返回。
元素遍历
Element Traversal API为DOM元素添加了五个属性：
childElementCount:返回子元素数量（不包含文本节点和注释）；
firstElementChild:指向第一个ELement类型的子元素；
lastElementChild:指向最后一个Element类型的子元素；
previousElementSibling:指向前一个Element类型的同胞元素；
nextElementSibling:指向后一个Element类型的同胞元素。
为什么这里的东西和前面的那么像呢，因为IE9之前的浏览器总是特立独行，所以为开发者们带来了很大的麻烦，W3C又规范了这样的一系列新的标准方便开发者们使用。
HTML5
H5代表着与以前的HTML截然不同的方向。H5规范包含了与标记相关的大量JavaScript API定义，其中有API与DOM重合，定义了浏览器应该提供的DOM扩展。
1.CSS类扩展
1.getElementsByClassName()
getElementByClassName():接收一个参数，即包含一个或多个类名的字符串，返回类名中包含相应类的元素的NodeList。
2.classList属性
要操作类名，可以通过className属性实现添加、删除和替换。className是一个字符串，每次操作之后都需要重新设置这个值才能生效。
<div class = 'bd user disabled'></div>
let targetClass = 'user';
let classNames = div.className.split(/\s+/);
let idx = classNames.indexOf(targetClass);
if(idx > -s){
classNames.splice(i,1);
}
div.className = classNames.join(' ');
HTML5通过给所有元素增加classList属性为这些操作提供了更简单也更安全的实现方式。
classList是一个新的集合类型DOMTokenList的实例，一样用length属性表示自己有多少项，item()或中括号取得个别元素。还有👇一些方法：
add(value)：向类名列表中添加指定的字符串值value。如果这个值已经存在，就什么都不做。
contains(value)：返回布尔值，表示给定的value是否存在。
remove(value)：从类名列表中删除指定的字符串value。
toggle(value)：如果存在就删除，不存在就添加。
那么👆的代码就可以简化为👇：
div.classList.remove('user');
2.焦点管理
document.activeElement
document.hasFoucs()
3.HTMLDocument扩展
1.readyStates属性
wow看了这么久📕，第一次发现IE干了人事，所以要记录一下，这个属性是IE4最先提出来的，别的浏览器照葫芦画瓢也实现了这个属性。
document.readyStates属性有两个可能的值👇
loading:表示文档正在加载。
complete:表示文档加载完成。
一般把他当成一个指示器👇
if(document.readyStates == 'complete'){
//执行操作
}
2.compatMode属性
这个属性的唯一任务是只是浏览器当前处于什么渲染模式。
3.head属性
document.head:指向<head>标签。
4.字符集属性
utf-8
5.自定义属性
6.插入标记
①innerHTML属性
在读取innerHTML属性时，会返回元素所有后代的HTML字符串，写入时，则会根据提供的字符串值，以及新的DOM子树代替元素中原来的所有节点。
②旧IE中的innerHTML
③outerHTML属性
读取outerHTML属性时，会返回调用它的元素的HTML字符串。在写入outerHTML时，调用它的元素会被传入的HTML字符串经解释之后生成的DOM子树取代。
④insertAdjacentHTML和insertAdjacentText
插入标签的两个新增办法，他们都接收两个参数：要插入标记的位置和要插入的HTML或文本。第一个参数值必须为👇的一个
beforebegin:插入当前元素前面，作为前一个同胞节点。
afterbegin:插入当前元素内部，作为新的子节点或放在第一个子节点前面。
beforeend:插入当前元素的内部，作为新的子节点或放在最后一个子节点后面。
afterend:插入当前元素的后面，作为下一个同胞节点。
7.scrollIntoView()
P456
4.专有扩展
文章内容参考：JavaScript高级程序设计（第四版）标题样式来自：juejin.cn/post/684490…
哪里写错了就联系我🐧：54269504
