DocumentType type, documentfragement type of DOM node

DocumentFragment type

Custom

Of all the node types, only documentfragment does not have a corresponding tag in the document. The DOM rules document fragment (Doc fragment) is a "lightweight" document that can contain and control nodes, but does not occupy additional resources like a complete document.

Characteristics

Nodetype:11
NodeName: #document-fragment
Nodevalue:null
Parentnode:null
Childnode:element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference

"Methods and Applications"

Although you cannot add a document fragment directly to a document, you can use it as a "warehouse" where you can save nodes that may be added to the document in the future. To create a document fragment, you can use the Document.createdocumentfragment () method. A document fragment inherits all of the methods of node and is typically used to perform DOM operations on the document. If you add a node in a document to a document fragment, the node is removed from the document tree, and the node is not visible from the browser. The new node added to the document fragment also does not attribute the document tree. You can add content from a document fragment to a document by AppendChild () or insertbefore (). When you pass a document fragment as an argument to both methods, you actually add all the child nodes of the document fragment to the appropriate location, and the document fragment itself never becomes part of the document tree.

<ul class= "list" id= "list" ></ul><script>Console.time ("Time");varOlist = document.getElementById (' list ');varFragment =document.createdocumentfragment ();varLi =NULL; for(vari = 0; I < 300000; i++) {Li= document.createelement (' li '); Li.appendchild (document.createTextNode ("Item" + (i+1))); Fragment.appendchild (LI);} Olist.appendchild (fragment);//462.545msConsole.timeend (' Time ');</script>

<ul class= "list" id= "list" ></ul><script>console.time ("Time"); var olist = document.getElementById (' list ');  for (var i = 0; i < 300000; i++) {    var li = document.createelement (' li ');    Li.appendchild (document.createTextNode ("Item" + (i+1)));    Olist.appendchild (LI);} Console.timeend (' time '); // 711.905ms</script>

As can be seen from the above results, the performance of using documentfragment is better when adding <li> tags to the page

DocumentType type

Custom

The DocumentType type contains all the information related to the DOCTYPE of the document

Characteristics

Nodetype:10
Name of the Nodename:doctype
Nodevalue:null
Parentnode:document
Childnode: No Child nodes

<! DOCTYPE html>//ie8-Browser does not support Document.doctypevar Odoctype = Document.doctype; if (odoctype) {    //  HTML null    console.log (Odoctype.nodename, Odoctype.nodetype,odoctype.nodevalue);     // #document []     Console.log (odoctype.parentnode,odoctype.childnodes)}</script></body>
Properties
The DocumentType object has 3 properties: Name, entities, notations. Typically, a document in a browser uses HTML or XHTML document types, so entites and notations are empty lists (items in the list are from the inline document type declaration)
Name indicates the document type
Entities represents an entity's NamedNodeMap object that is described by a document type
Notations NamedNodeMap object that represents the symbol described by the document type
<! DOCTYPE html>//ie8-Browser does not support Document.doctypevar Odoctype = Document.doctype; if (odoctype) {    console.log (odoctype.name,odoctype.entities,odoctype.notations); // html undefined undefined }</script></body> 
　　
DocumentType type, documentfragement type of DOM node