他支持以下DOM2方法:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2屬性:
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以將documentFragment 作為一個參數(shù),(比如Node的 appendChild和insertBefore 方法),這樣,fragment 就可以被追加到父對象中。
Example:
代碼如下:
var frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Ipsum Lorem'));
document.body.appendChild(frag);
document.createDocumentFragment()說白了就是為了節(jié)約使用DOM。每次JavaScript對DOM的操作都會改變頁面的變現(xiàn),并重新刷新整個頁面,從而消耗了大量的時間。為解決這個問題,可以創(chuàng)建一個文檔碎片,把所有的新節(jié)點附加其上,然后把文檔碎片的內(nèi)容一次性添加到document中。
代碼如下:
var oui=document.getElementById("oItem");
for(var i=0;i<10;i++)
{
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item"+i));
}
上面的代碼在循環(huán)中調(diào)用了oui.appendChild(oli),每次執(zhí)行這條語句后,瀏覽器都會更新頁面。其次下面的oui.appendChild()添加了文本節(jié)點,也要更新頁面。所以一共要更新頁面20次。
為了頁面的優(yōu)化,我們要盡量減少DOM的操作,將列表項目在添加文本節(jié)點之后再添加,并合理地使用creatDocumentFragment(),代碼如下:
代碼如下:
var oui=document.getElementById("oItem");
var oFragment=document.createDocumentFragment();
for(var i=0;i<10;i++){
var oli=document.createElement("li");
oli.appendChild(document.createTextNode("Item"+i));
oFragment.appendChild(oli);
}
oui.appendChild(oFragment);
W3C參考:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A3
-------------------------------------------
DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document's tree or to create a new fragment of a document. Imagine implementing a user command like cut or rearranging a document by moving fragments around. It is desirable to have an object which can hold such fragments and it is quite natural to use a Node for this purpose. While it is true that a Document object could fulfill this role, a Document object can potentially be a heavyweight object, depending on the underlying implementation. What is really needed for this is a very lightweight object. DocumentFragment is such an object.
Furthermore, various operations -- such as inserting nodes as children of another Node -- may take DocumentFragment objects as arguments; this results in all the child nodes of the DocumentFragment being moved to the child list of this node.