1、所有的節(jié)點(diǎn)類型中钱贯,只有documentFragment在文檔中沒有對(duì)應(yīng)的標(biāo)記。
2尉共、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熊镣、ProcessingInstruction募书、Comment测蹲、Text、CDATASection或EntityReference扣甲。
文檔片段不能直接添加到文檔中,但可以將它作為一個(gè)“倉庫”來使用启泣,即可以在里面保存將來可能會(huì)添加到文檔中的節(jié)點(diǎn)示辈。
創(chuàng)建DocumentFragment節(jié)點(diǎn):createDocumentFragment
文檔片段繼承了Node的所有方法,通常用于執(zhí)行那些針對(duì)文檔的DOM操作顽耳。
1、若將文檔中的節(jié)點(diǎn)添加到文檔片段中,就會(huì)從文檔樹中移除該節(jié)點(diǎn)胰耗,也不會(huì)從瀏覽器中再看到該節(jié)點(diǎn)芒涡。
2柴灯、添加到文檔片段中的新節(jié)點(diǎn)同樣也不屬于文檔樹费尽。
3、可以用appendChild()或insertBefore()將文檔片段中內(nèi)容添加到文檔中查描。
4柏卤、文檔片段本身永遠(yuǎn)不會(huì)成為文檔樹的一部分。
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for(var i=0;i<3;i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item "+(i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
如果逐個(gè)地添加列表項(xiàng)缘缚,會(huì)導(dǎo)致瀏覽器反復(fù)渲染(呈現(xiàn))新信息。用文檔片段來保存創(chuàng)建的列表項(xiàng)窝爪,然后再一次性將他們添加到文檔中可以避免這個(gè)問題。