选择符API
（1）querySelector() //返回单例
（2）querySelectorAll() //返回nodelist，即使只有一个也是
（3）matchesSelector() //检测该选择符是否存在
元素遍历（不包括空白文本节点）
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
HTML5中的DOM操作
（1）classList——对类名进行操作
如删除类名 user
div.classList.remove("user")
还有其他操作：add()、contains()判断是否有特定的值、remove()、toggle()有则移除，没有则添加。
（2）焦点管理（实用且重要）
1)、document.activeElement，该属性会始终引用当前获取焦点的元素。
$('body').on('keydown',(e)=>{
console.log(document.activeElement.nodeName) //BODY、INPUT都是大写的
})
2)、document.hasFocus()，确定文档是否获取焦点，即可以知道用户是不是正在与页面交互
（3）readyState
document.readyState——判断文档是否加载成功
document.readState==="complete" 已加载完毕
document.readState==="loading" 正在加载
（4）head属性
document.body引用body元素
document.head引用head元素
兼容性写法：
let head=document.head||document.getElementsByTagName("head")[0]
（5）字符集属性——document.charset
修改字符集属性可通过三种方法：
1)、
2)、响应头部（后台）
request.setCharacterEncoding("utf-8");
3)、直接设置charset属性
document.charset="UTF-8"
（6）自定义数据属性—— data-xxx
通过 DOM元素.dataset.自定义属性名去获取
let aa=document.querySelector('#div')
let bb=aa.dataset.aa
console.log(bb) //hahaah
（7）插入标记
1)、innerHTML
以下方法效率低下
for(let i=0,len=values.length;i" //要避免该频繁操作
}
以下方法效率高效，因为它对innerHTML只做了一次赋值操作
let txt=""
for(let i=0,len=values.length;i"+values[i]+""
}
ul.innerHTML=txt
2)、outerHTML
3)、insertAdjacentHTML()
（8）scrollIntoView()——将目标滑动到可视区域上
详细的看这里
（9）children属性
（10）contains()方法——判断某个节点是否是另一节点的后代
xxx(祖先节点).contains(xxx(要检测得后代节点)) //true或false
let aa=document.querySelector('#div')
let bb=document.querySelector('#input')
console.log(aa.contains(bb)) //true
（11）innerText
设置innerText永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，就必须要对文本进行HTML编码，利用这个，就可以过滤HTML标签。
let aa=document.querySelector('#div')
aa.innerText="hello11" //hello11
（12）outerText
跟innerText最大区别是它会包括自身节点。
（完，有的兼容性代码未整理）