8.DOM
1).****新建节点
document.createElement("元素名") // 新建一个元素节点
document.createAttribute("属性名") // 新建一个属性节点
document.createTextNode("文本内容") // 创建一个文本节点
document.createDocumentFragment() // 新建一个DOM片段
2).****添加、移除、替换、插入：
appendChild() // 向节点的子节点末尾添加新的子节点
removerChild() // 移除
parentNode.replaceChild(newChild, oldChild );用新节点替换父节点中已有的子节点
insertBeform() // 在已有的子节点前插入一个新的子节点
3).****查找
document.getElementById() // 通过元素id查找,唯一性
document.getElementByClassName() // 通过class名称查找
document.getElementsByTagName() // 通过标签名称查找
document.getElementsByName() // 通过元素的Name属性的值查找
------------------------------------------------------------------
DOM****回流、重绘
DOM回流(reflow)：页面中的元素增加、删除、大小、位置的改变，会引起浏览器重新计算 其他元素的位置，这种现象称为DOM回流。DOM回流非常消耗性能，尽量避免DOM回流
DOM重绘：元素的某些css样式如背景色、字体颜色等发生改变时，浏览器需要重新描绘渲 染这个元素，这种现象称为DOM重绘。
DOM 操作的读写分离
在JS中把设置样式和获取样式的两种操作分来来写， 设置样式的操作放在一起，读取样式的操作放在一起，这样可以有效的减少DOM的回流和重绘；
Box.style.background = ‘red’;
For(){}
Box.style.color = ‘green’
DOM事件：
事件的传播机制：先冒泡，然后是目标阶段 然后再去捕获，我们可以利用事件的冒泡来进行事件委托，、也就是可以在父元素上绑定事件，通过事件对象 e 来判断点击的具体元素；可以提供性能；
我们可以利用的 e.stopPropagation()来阻止冒泡；利用 e.preventDefault()来阻止默认事件；
事件中有0级事件绑定和2级事件绑定
JS 盒子模型
// client offset scroll width height left top
// clientWidth 内容宽度 + 左右padding
// offsetWidth clientWidth + 左右 border
// offsetTop 当前盒子的外边框到上级参照物的内边框的偏移量
// offsetParent 上级参照物：有定位的上级（包含 父级，祖父，曾祖父...）元素，所有所有上级都没有定位， 则参照物就是 body
// scroll 内容不溢出 等同于 client
// 内容溢出时 没有设置overflow 值是内容宽高 + 上或左padding
// 内容溢出时 有设置overflow时 值是内容宽高 + 上下或左右padding
// scrollTop 卷去内容的高度
// 13个属性 只有 scrollTop和scrollLeft时可以设置值的， 其他的都是只读属性