documentFragment深入理解

抽疯的稻草绳关注 0.4482020.12.27 16:42:40字数 178阅读 3,225

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

创建documentFragment对象fragment
取出ul中的所有子节点并保存到fragment
更新fragment中的所有节点（li的内容）
将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用来批量更新元素

    3人点赞   Dom    

标签：test1,fragment,更新,ul,理解,深入,documentFragment,节点
来源： https://www.cnblogs.com/sexintercourse/p/16538720.html