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级事件绑定