DocumentFragment類型也是用得比較少的類型之一，但我們還是有必要介紹下其使用方法，以便在開發(fā)過程中遇到了該類型可以查看其使用方法，在所有節(jié)點(diǎn)類型中，只有DocumentFragment在文檔中沒有對(duì)應(yīng)的標(biāo)記。DOM規(guī)定文檔片段 ( document fragment)是一種“輕量級(jí)"的文檔，可以包含和控制節(jié)點(diǎn)，但不會(huì)像完整的文檔那樣占用額外的資源。DocumentFragment節(jié)點(diǎn)具有下列特征：

◎nodeType的值為11;

◎nodeName的值為"#document-fragment";

◎nodeValue的值為null;

◎parentNode的值為null;

◎子節(jié)點(diǎn)可以是Element、Proces singlns truc tion、comment、Text、CDATASection或EntityReference。

雖然不能把文檔片段直接添加到文檔中，但可以將它作為一個(gè)“倉庫"來使用，即可以在里面保存將來可能會(huì)添加到文檔中的節(jié)點(diǎn)。要?jiǎng)?chuàng)建文檔片段，可以使用document.createDocumentFragment()

方法，如下所示：

var fragment=document .createDocumentFragment();

文檔片段繼承了Node的所有方法，通常用于執(zhí)行那些針對(duì)文檔的DOM操作。如果將文檔中的節(jié)點(diǎn)添加到文檔片段中，就會(huì)從文檔樹中移除該節(jié)點(diǎn)，也不會(huì)從瀏覽器中再看到該節(jié)點(diǎn)。添加到文檔

片段中的新節(jié)點(diǎn)同樣也不屬于文檔樹?？梢酝ㄟ^appendChild()或insertBefore()將文檔片段中內(nèi)容添加到文檔中。在將文檔片段作為參數(shù)傳遞給這兩個(gè)方法時(shí)，實(shí)際上只會(huì)將文檔片段的所有子節(jié)點(diǎn)

添加到相應(yīng)位置上;文檔片段本身永遠(yuǎn)不會(huì)成為文檔樹的一部分。來看下面的HTML示例代碼：

假設(shè)我們想為這個(gè)

元素添加3個(gè)列表項(xiàng)。如果逐個(gè)地添加列表項(xiàng)，將會(huì)導(dǎo)致瀏覽器反復(fù)渲染(呈現(xiàn))新信息。為避免這個(gè)問題，可以像下面這樣使用一個(gè)文檔片段來保存創(chuàng)建的列表項(xiàng)，然后再

一次性將它們添加到文檔中：

var fragment=document.createDocumentFragment();

var ul=document.getElementByld("myList");

var li=null;

for (var i=0;i<3; i++){

li=document.createElement("li");

li. appendChild( document. createTextNode("Item"+(i+l)));

ragment. appendChild(li);

}

ul. appendChild(fragment);

在這個(gè)例子中，我們先創(chuàng)建一個(gè)文檔片段并取得了對(duì)

元素的引用。然后，通過for循環(huán)創(chuàng)建 3個(gè)列表項(xiàng)，并通過文本表示它們的順序。為此，需要分別創(chuàng)建

元素、創(chuàng)建文本節(jié)點(diǎn)，再把文本

節(jié)點(diǎn)添加到

元素。接著使用appendChild()將

元素添加到文檔片段中。循環(huán)結(jié)束后，再調(diào)用appendChild()并傳人文檔片段，將所有列表項(xiàng)添加到

元素中。此時(shí)，文檔片段的所有子節(jié)點(diǎn)都被刪除并轉(zhuǎn)移到了

元素中。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.gimmickmag.com/website/index.html/如轉(zhuǎn)載請(qǐng)注明出處!