文檔碎片是什么？

參考標(biāo)準(zhǔn)的描述，DocumentFragment是一個輕量級的文檔對象，能夠提取部分文檔的樹或創(chuàng)建一個新的文檔片段，換句話說有文檔緩存的作用。

createDocumentFragment有什么作用

多次使用節(jié)點(diǎn)方法(如：appendChild)繪制頁面，每次都要刷新頁面一次。效率也就大打折扣了，而使用document_createDocumentFragment()創(chuàng)建一個文檔碎片，把所有的新結(jié)點(diǎn)附加在其上，然后把文檔碎片的內(nèi)容一次性添加到document中，這也就只需要一次頁面刷新就可以了。

DocumentFragment類型

在所有節(jié)點(diǎn)類型中，只有DocumentFragment在文檔中沒有對應(yīng)的標(biāo)記。DOM規(guī)定文檔片段（documentfragment）是一種“輕量級”的文檔，可以包含和控制節(jié)點(diǎn)，但不會像完整的文檔那樣占用額外資源。DocumentFragment節(jié)點(diǎn)具有下列特征：

1. nodeType的值為11
2. nodeName的值為“#document-fragment”
3. nodeValue的值為 null
4. parentNode的值為 null
5. 子節(jié)點(diǎn)可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference

雖然不能把文檔片段直接添加到文檔中，但可以將它作為一個“倉庫”來使用，即可以在里面保存將來可能會添加到文檔中的節(jié)點(diǎn)。要創(chuàng)建文檔片段，可以使用 document.createDocumentFragment()方法，如下所示：

var fragment = document.createDocumentFragment();

文檔片段繼承了Node的所有方法，通常用于執(zhí)行那些針對文檔的DOM操作。如果將文檔中的節(jié)點(diǎn)添加到文檔片段中，就會從文檔樹中再看到該節(jié)點(diǎn)。添加到文檔片段中的新節(jié)點(diǎn)同樣也不屬于文檔樹?？梢酝ㄟ^appendChild()或insertBefore()將文檔片段中內(nèi)容添加到文檔中。在將文檔片段作為參數(shù)傳遞給這兩個方法時，實(shí)際上只會將文檔片段的所有子節(jié)點(diǎn)添加到相應(yīng)的位置上；文檔片段本身永遠(yuǎn)不會稱為文檔樹的一部分。

http://www.w3cmm.com/dom/documentfragment.html

createElement與createDocumentFragment

createElement是創(chuàng)建一個新的節(jié)點(diǎn)，createDocumentFragment是創(chuàng)建一個文檔片段。

DocumentFragment 接口表示文檔的一部分（或一段）。更確切地說，它表示一個或多個鄰接的 Document 節(jié)點(diǎn)和它們的所有子孫節(jié)點(diǎn)。

DocumentFragment 節(jié)點(diǎn)不屬于文檔樹，繼承的 parentNode 屬性總是 null。

不過它有一種特殊的行為，該行為使得它非常有用：

即當(dāng)請求把一個 DocumentFragment 節(jié)點(diǎn)插入文檔樹時，插入的不是 DocumentFragment 自身，而是它的所有子孫節(jié)點(diǎn)。這使得 DocumentFragment 成了有用的占位符，暫時存放那些一次插入文檔的節(jié)點(diǎn)。它還有利于實(shí)現(xiàn)文檔的剪切、復(fù)制和粘貼操作，尤其是與 Range 接口一起使用時更是如此。

可以用 Document.createDocumentFragment() 方法創(chuàng)建新的空 DocumentFragment 節(jié)點(diǎn)。

也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 獲取包含現(xiàn)有文檔的片段的 DocumentFragment 節(jié)點(diǎn)。

除此之外，createElement創(chuàng)建的元素可以使用innerHTML，createDocumentFragment創(chuàng)建的元素使用innerHTML并不能達(dá)到預(yù)期修改文檔內(nèi)容的效果，只是作為一個屬性而已。兩者的節(jié)點(diǎn)類型完全不同，并且createDocumentFragment創(chuàng)建的元素在文檔中沒有對應(yīng)的標(biāo)記，因此在頁面上只能用js中訪問到。

createElement創(chuàng)建的元素可以重復(fù)操作，添加之后就算從文檔里面移除依舊歸文檔所有，可以繼續(xù)操作，但是createDocumentFragment創(chuàng)建的元素是一次性的，添加之后再就不能操作了，在之前domManip方法中提到的iNoClone多個節(jié)點(diǎn)操作需要克隆，就是因?yàn)槲臋n碎片的特性引起的，大體了解了，我們看看jQuery對于節(jié)點(diǎn)操作的時候，加強(qiáng)版的文檔碎片buildFragment。