可以提取頁(yè)面上的節(jié)點(diǎn)闯狱，進(jìn)行編輯操作。
- 一次性提取需要的節(jié)點(diǎn)抛计，處理后重新插入回去哄孤，減少頁(yè)面重繪
let fragment = document.createDocumentFragment()
fragment 是一個(gè)指向空[DocumentFragment]對(duì)象的引用。
("DocumentFragment 接口表示一個(gè)沒有父級(jí)文件的最小文檔對(duì)象吹截。它被當(dāng)做一個(gè)輕量版的 Document 使用瘦陈，用于存儲(chǔ)已排好版的或尚未打理好格式的XML片段。最大的區(qū)別是因?yàn)镈ocumentFragment不是真實(shí)DOM樹的一部分波俄，它的變化不會(huì)引起DOM樹的重新渲染的操作(reflow) 晨逝，且不會(huì)導(dǎo)致性能等問題。")
appendChild() 方法可向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)懦铺。
提示：如果文檔樹中已經(jīng)存在了 newchild捉貌，它將從文檔樹中刪除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 節(jié)點(diǎn)昏翰，則不會(huì)直接插入它苍匆，而是把它的子節(jié)點(diǎn)按序插入當(dāng)前節(jié)點(diǎn)的 childNodes[] 數(shù)組的末尾。
<div id="app">
<p id="childNode">hello</p>
</div>
<script>
let fragment = document.createDocumentFragment()
let someChild = document.querySelector('#childNode')
let app = document.querySelector('#app')
// Ｅ锞铡摆出！注意提取someChild走敌，app里就不存在了
fragment.appendChild(someChild)
// 修改內(nèi)容
fragment.childNodes[0].textContent = '修改后在插入app'
// 重新插入到app 中
//fragment 可以全部插入叹坦，也可以選擇部分fragment.childNodes[0]
//插入后后的節(jié)點(diǎn)挖息，fragment里便不存在了
app.appendChild(fragment)
</script>
