documentFragment深入理解

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新
列如将ul里面的li取出放到documentFragment,更新完毕后再将其插入到ul,一共有以下四步骤：

1. 创建documentFragment对象fragment
2. 取出ul中的所有子节点并保存到fragment
3. 更新fragment中的所有节点（li的内容）
4. 将fragment插入到ul

//初始显示test1
<div id="test">
        <li>test1</li>
        <li>test1</li>
        <li>test1</li>
    </div>

const ul = document.getElementById('test')
// 创建fragment对象
const fragment = document.createDocumentFragment()
//  取出ul中的所有子节点并保存到fragment
let child;
while(child=ul.firstChild) {
  fragment.appendChild(child)
}
//更新fragment中的所有节点（li的内容）
Array.prototype.slice.call(fragment.childNodes).forEach(node => {
  if (node.nodeType===1) {//取得元素节点
    node.textContent = 'test2' //重新赋值为test2
  }
})
// 将fragment插入到ul
ul.appendChild(fragment)

在fragment插入到ul之前页面不会更新，documentFragment用来批量更新元素

转载于:https://www.cnblogs.com/yuanchao-blog/p/10847417.html