documentFragment深入理解

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用来批量更新元素

巴特西

documentFragment深入理解

最新文章

热门文章