DOM 重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作

1.创建

1. document.write
2. innerHTML
3. createElement
区别
1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2.innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3.innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4.createElement() 创建多个元素效率稍低一点点，但是结构更清晰不同浏览器下，innerHTML 效率要比 creatElement 高

2.增

1.appendChild
2.insertBefore
1.node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素
2.node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before伪元素

3.删除，复制节点

removeChild
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。
1.如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2.如果括号参数为 true ，则是深拷贝，会复制节点本身以及里面所有的子节点

4.改

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
1.修改元素属性： src、href、title等
2.修改普通元素内容： innerHTML 、innerText
3.修改表单元素： value、type、disabled等
4.修改元素样式： style、className

5.查

主要获取查询dom的元素
1.DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
2.H5提供的新方法： querySelector、querySelectorAll 提倡
3.利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡

6. 属性操作

1.setAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute移除属性

7.事件操作

事件操作.png