网页是“一棵树”，浏览器通过在window上加上document来操作这"一棵树"，用JS来操作网页，这就是Document Object Model（文档对象模型），下面我将对DOM进行总结。
一、DOM基础
1.1、获取元素
以下是来自百度网页的部分id和class，id=wrapper_wrappe，class=s_tab。
document.getElementById('wrapper_wrappe')
document.getElementsByTagName('div')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('s_tab ')
document.getElementsByClassName('s_tab ')[0]
document.querySelector('#wrapper_wrapper')
document.querySelectorAll('.s_tab ')[0]
window.wrapper_wrapper
wrapper_wrapper
1.2、获取特定元素
document.documentElement // 获取html元素
document.head // 获取head
document.body // 获取body
document.all // 获取所有元素
1.3、六层原型
我们获取到的元素是什么呢？是一个对象，我们寻找一个div对象，let div =document.getElementsByTagName('div')[0]；使用console.dir(div)来查看它的原型链。第一层原型是HTMLDivElement.prototype；第二层原型是HTMLElement.prototype；第三层原型是Element.prorotype；第四层原型是Node.prototype；第五层原型是EventTarget.prototype；第六层原型是Object.prorotype。
1、第一层原型
2、第二层原型
3、第三层原型
4、第四层原型
5、第五层原型
6、第六层原型
二、节点的增删改查
2.1、增加节点
创建一个标签节点
document.createElement("div")
document.createElement('style')
document.createElement('script')
document.createElement('li')
document.createElement("div")
创建一个文本节点
text1 = document.createTextNode('你好！')
document.createTextNode('你好！')
标签里面插入文本
div1.appendChild(text1)
div1.innerText ="你好，世界"
div1.textContent = '你好，，美丽的世界！'
插入页面中，我们创建的标签默认在JS线程中，我们必须把它插入head和body里才能生效。
document.body.appendChild(div1)
// 或者已在页面中的元素.appendChild(div)
2.2、删除节点
parentNode.childChild(childNode) // 旧方法
childNode.remove() // 新方法
2.3、改变节点
改标准属性
改class： div.className = 'red blue' （全覆盖）
改class： div.classList.add('red')
改style一部分： div.style.width = '500px'
大小写： div.style.backgroundColor = 'white'
改data-*属性： div.dataset.x = 'xinhai'
改事件处理函数
div.onclick默认为null，默认点击div不会有任何事情发生，但是如果把div.onclick改为一个函数，那么点击div的时候；浏览器就会调动这个函数，并且是fn.call(div,event)；div会被当做this，event则包含了点击事件的所有信息如坐标。
改父亲
newParent.appendChild(div)
2.4、查找节点
查爸爸：node.parentNode或者node.parentElement。
查爷爷：node.parentNode.parentNode。
查子代：node.childModes或者node.children。
查看老大：node.firstChild。查看最后一个儿子：node.lastChild。
查看上一个哥哥：node.previousSibling。查看下一个弟弟：node.nextSibling。
三、DOM操作为什么慢
这是因为DOM操作是跨线程的，我们的浏览器分为渲染引擎和JS引擎，二者会各自负责自身分内的事情，JS引擎只能操作JS，不能操作页面；而渲染引擎智能操作页面，不能操作JS。通过DOM操作，比如document.body.appendChild(div1)如何改变页面。这时当浏览器发现JS在body中加了一个div1对象时，就将告知渲染引擎在页面中也加上一个div元素，而浏览器通知渲染引擎肯定是需要时间的，新加的div元素的全部属性都抄div1对象的。
四、封装DOM
由于DOM的API太难写了，我也尝试把增删改查封装一下，以下是我封装的DOM。
