三种动态创建元素的区别&&总结DOM重点核心

三种动态创建元素的区别

• document.write()
• element.innerHTML
• document.createElement()

<button>点击</button>
<p>123</p>
<script>
    // document.write() 创建元素 (如果页面加载完毕，在调用这句话会导致页面重绘)
    let btn = document.querySelector('button');
    btn.onclick = function() {
        document.write('<div>57</div>');
    }
    // btn.onload = function() {
    //     document.write('<div>57</div>');
    // }
</script>

• document.write()是直接将内容写入到页面的内容流，如果页面加载完毕，在调用这句话会导致页面重绘
• element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
  • 创建多个元素效率更高(不要拼接字符串，采用数组形式拼接)，解构稍微复杂
• document.createElement()创建多个元素效率稍低一点，但是结构更加清晰

不同浏览器下，innerHTML效率要比createElement高

下面的内容是前面的总结

DOM重点核心

文档对象模型(DocumentObjectModel,简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口

• W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
  • 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口chengyikeDOMshu
  • 对于HTML,DOM使得html形成一颗DOM树，包含文档、元素、节点 利用DOM获取的元素都是一个对象(object)，所以称为文档对象模型

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

• 创建：document.write()、innerHTML、createElement
• 增：appendChild、insertBefore
• 删：removeChild
• 改：主要修改DOM元素属性
  • 修改元素属性：src、href、title等
  • 修改普通元素内容：innerHTML、innerText
  • 修改表单元素：value、type、disabled等
  • 修改元素样式：style、className
• 查：主要获取查询DOM的元素
  • DOM提供的API方法：getElementById、getElementsByTagName
  • H5提供的新方法：querySelector、querySelectorAll
  • 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling)、弟(nextElementSibling)
• 属性操作：主要针对于自定义属性
  • setAttribute设置DOM的属性值
  • getAttribute得到DOM的属性值
  • removeAttribute移除属性
• 事件操作
  • 给元素绑定事件：采取事件源.事件类型=事件处理程序