【脚本化文档】——创建和插入节点

整个过程主要有三个步骤，很简单，最后讲一个性能问题

——step1：创建空节点对象（重点是元素对象）

var newElem=document.createElement("标签名")

——step2：为空元素设置必要属性

——step3：将新元素挂到指定的父元素下（3种方式）

• 末尾追加： 父元素.appendChild(新元素对象)
• 中间插入： 父元素.insertBefore(新元素，旧元素)
• 替换节点: 父元素.replaceChild(旧元素，新元素)

---

性能问题：频繁向页面document上的DOM元素追加或插入节点，
会造成反复解析DOM树——效率差

对此，有两个建议
1、创建父对象+多个子对象时，应先将子对象加入父对象中，
再一次性将父对象加入DOM树

2、如果反复追加平级节点 ：先用文档片段保存所有平级节点，
再将文档片段整体追加到DOM树上

• 文档片段：内存中临时保存多个DOM节点对象的空间

• 如何使用

  • 使用前要先创建文档片段对象
  • var frag=document.createDocumentFragment();
  • 向文档片段中临时存入节点对象，和向文档中插入节点对象一样
  • 将文档片段整体放入DOM树中。

  frag对象用法同普通父节点对象；文档片段不会在页面显示！

---

期待你阅读下一篇博文【脚本化文档】——文档和元素的几何形状和滚动

点击这里下载思维导图——思维导图文件下载