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

轉載于:https://www.cnblogs.com/yuanchao-blog/p/10847417.html

總結

以上是生活随笔為你收集整理的documentFragment深入理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。