documentFragment是一個保存多個element的容器對象（保存在內(nèi)存）當(dāng)更新其中的一個或者多個element時，頁面不會更新。只有當(dāng)documentFragment容器中保存的所有element更新后再將其插入到頁面中才能更新頁面。
documentFragment用來批量更新
列如將ul里面的li取出放到documentFragment,更新完畢后再將其插入到ul,一共有以下四步驟：

創(chuàng)建documentFragment對象fragment

取出ul中的所有子節(jié)點并保存到fragment

更新fragment中的所有節(jié)點（li的內(nèi)容）

將fragment插入到ul

//初始顯示test1 <div id="test"><li>test1</li><li>test1</li><li>test1</li></div> const ul = document.getElementById('test') // 創(chuàng)建fragment對象 const fragment = document.createDocumentFragment() // 取出ul中的所有子節(jié)點并保存到fragment let child; while(child=ul.firstChild) {fragment.appendChild(child) } //更新fragment中的所有節(jié)點（li的內(nèi)容） Array.prototype.slice.call(fragment.childNodes).forEach(node => {if (node.nodeType===1) {//取得元素節(jié)點node.textContent = 'test2' //重新賦值為test2} }) // 將fragment插入到ul ul.appendChild(fragment)

在fragment插入到ul之前頁面不會更新，documentFragment用來批量更新元素

轉(zhuǎn)載于:https://www.cnblogs.com/yuanchao-blog/p/10847417.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。