About JavaScript document.createdocumentfragment () _javascript Tips

Source: Internet
Author: User
He supports the following DOM2 methods:
AppendChild, CloneNode, HasAttributes, HasChildNodes, InsertBefore, normalize, RemoveChild, ReplaceChild.
The following DOM2 are also supported:
Attributes, ChildNodes, FirstChild, LastChild, LocalName, NamespaceURI, nextSibling, NodeName, NodeType, NodeValue, Ownerdocument, parentnode, prefix, previoussibling, textcontent.
Other methods can be documentfragment as a reference (such as node's AppendChild and InsertBefore methods), so fragment can be appended to the parent image.
Example:
Copy Code code as follows:

var frag = document.createdocumentfragment ();
Frag.appendchild (document.createTextNode (' ipsum lorem '));
Document.body.appendChild (Frag);

Document.createdocumentfragment () is to save the use of DOM. Each JavaScript operation on the DOM changes the page's transformation and refreshes the entire page, which consumes a lot of time. To solve this problem, you can create a fragment of the document, attach all the new nodes to it, and then add the contents of the document fragment to the documents at once.
Copy Code code as follows:

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));
}

The above code calls Oui.appendchild (Oli) in the loop, and each time the statement is executed, the browser updates the page. Next Oui.appendchild () adds a text node and updates the page. So I want to update the page 20 times altogether.
For page optimization, we want to minimize the operation of the DOM, add the list item after adding the text node, and use Creatdocumentfragment () appropriately, the code is as follows:
Copy Code code as follows:

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);

Reference to the consortium: 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 being able to extract a portion of a document ' s "or to create a new fragment of a. Imagine Implementing a user command like or rearranging a document by moving fragments around. It is desirable to have an object which can hold such fragments and it are quite to use a Node for this natural. While it is true so a Document object could fulfill this role, a document object can potentially be a heavyweight object , depending on the underlying implementation. The What is really needed the 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 object s as arguments; This is results in the "all" of the child nodes of the the documentfragment being moved to the "child" list of this node.

The children of a documentfragment node are zero or more nodes representing the tops of any sub-trees defining the STRUCTU Re of the document. DocumentFragment nodes do not need to is well-formed XML documents (although they do need to follow the rules imposed upon Well-Formed XML parsed entities, which can have multiple top nodes). For example, a documentfragment might have only one of the child node could be a Text node. Such A structure model represents neither an HTML document nor a well-formed XML document.

When a documentfragment was inserted into a Document (or indeed any other Node, may take children) the children of the DocumentFragment and not the documentfragment itself are inserted into the Node. This makes the documentfragment very useful as the user wishes to create nodes that are siblings; The DocumentFragment acts as the parent of these nodes and the user can use the standard methods from the Node Interfa CE, such as InsertBefore and AppendChild.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.