基本概念
DOM是英文Document Object Model的缩写，即文档对象模型。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。
网页其实也是一棵树，那么JS是如何操作这棵树的呢？浏览器往window上加一个document。JS就是用document来操作网页。
获取元素的API
获取元素，也叫标签有很多标签：
- document.getElementByld('idxxx')
- document.getElementsByTagName('div')[0]
- document.getElementsByClassName('red')[0]
- document.querySelector('#idxxx')
- document.query.SelectorAll('.red')[0]
获取特定元素
- document.documentElement//获取html元素
- document.head//获取head元素
- document.body//获取body元素
- window//获取窗口（窗口不是对象）
- document.all//获取所有元素
获取的元素是什么
我们获取的元素是一个对象，我们要搞清它的原型：下图是完整的原型链
节点（node）
节点包含以下几种：
x.nodeType得到一个数字：
1表示元素Element，也叫标签Tag
3表示文本Text
8表示注释Comment
9表示文档Document
11表示文档片段DocumentFragment
主要的只需要记住1和3即可
节点的增删改查
增：
创建一个标签节点
let div = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')创建一个文本节点
let text = document.createTextNode('你好')标签里面插入文本
div.appendChild(text)
div.innetText'你好'/div.textContent'你好'在这里需要注意一下：appendChild
let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)
div会出现在test2里面（一个元素不能出现在两个地方，除非复制一份）
删
两种方法：
旧方法：parentNode.childChild(childChild)
新方法：childNode.remove()
删除之后还在内存了
改
改属性：
div.className='red'
div.classList.add('red')
div.style='width:100px'
div.style.width='100px'
div.dataset.x='jack'//改data-属性该事件处理函数：
div.onclick默认为null,默认点击div不会发生任何事，但是如果你把div.onclick改成一个函数fn那么点击div的时候浏览器就会调用这个函数，并且是这样调用的fn.call(div,event)div会被当成this,event包含了点击事情的所有信息，如坐标。
该内容
该文本内容：
div.innerText='xxx'/div.textContent='xxx'改html内容：
div.innerHTML='xxx'改标签：
div.innerHTML=''//先清空
div.appendChild('div2')//在加内容改parent
newParent.appendChild(div)//直接从原来的地方消失查
node.parentNode/node.parentElement//查爸爸
node.parentNode.parentNode//查爷爷
node.childNode/node.children//查儿子
node.parentNode.childNode//（排除自己)查兄弟 node.firstChild/lastChild/previousSibling/nextSibling
遍历一个div里的所有元素：
let travel =(node,fn)=>{
fn(node)
if(node.children){
for(let i=0;i<node.children.length;i++){
travel(node.children[i],fn)
}
}
}
travel(div,(node)=>console.log(node))- DOM操作是跨线程的
浏览器分为渲染引擎和JS引擎：
各线程各司其职：JS引擎不能操作页面只能操作JS,渲染引擎不能操作JS只能操作页面
这个js命令:document.body.appendChild('div1')是如何改变页面的？
当浏览器发现js在body加了一个div1对象，浏览器也会通知渲染引擎新增一个div元素，新增的div元素所有属性照抄div1对象的。
属性同步：
- 标准属性
属性的标准属性（如：id、className、title等）的修改，会被同步到页面中
- data-*属性
同上
- 非标准属性
对非标准属性的修改，则会停留在js线程中，不会同步到页面里，比如x属性
properties是JS线程中div的所有属性，attributes是渲染引擎div对应标签的属性，不部分同名的两者值相等，但如果是非标准属性，他们只会一开始相等
注意：attributes只支持字符串；properties支持字符串、布尔等类型
前端小白，求留言指正！！！
