持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天
五、节点操作
7.三种动态创建元素区别
document.write()
element.innerHTML
document.createElement()
区别
1）document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2）innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3）innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4）createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement 高
六、DOM 重点核心
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点。
我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型。
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
1.创建
document.write
innerHTML
createElement
2.增
appendChild
insertBefore
3.删
removeChild
4.改
主要修改dom的元素属性，dom元素的内容、属性, 表单的值等。
修改元素属性： src、href、title等
修改普通元素内容： innerHTML 、innerText
修改表单元素： value、type、disabled等
修改元素样式： style、className
5.查
主要获取查询dom的元素
DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
H5提供的新方法： querySelector、querySelectorAll 提倡
利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡
6.属性操作
主要针对于自定义属性。
setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性
