JS copy objects and node types

1. Mylist.clonenode (TRUE); In the case of true, deep replication is performed, that is, the copy node and its entire child node tree, including attributes

2. Mylist.clonenode (FALSE); In the case of false arguments, perform a shallow copy, that is, copy only the node itself, including the properties

The CloneNode () method does not copy JavaScript attributes that are added to the DOM node, such as event handlers. This method only copies the attributes, and (in the case of explicitly specified cases) the child nodes, and nothing else is copied. There is a bug in IE where it replicates the event handlers, so we recommend that you remove the event handlers first before copying them.

3. Node type

The DOM1 class defines a node interface that will be implemented by all node types in the DOM. This node interface is implemented as a node type in JavaScript and can be accessed in all other browsers except IE. All node types in JavaScript inherit from the node type, so all node types share the same basic properties and methods. Each node has a NodeType property that indicates the type of the node. The node type is represented by the following 12 numeric constants defined in the node type, and any node type must reside in one of these:

? Node.element_node (1);
? Node.attribute_node (2);
? Node.text_node (3);
? Node.cdata_section_node (4);
? Node.entity_reference_node (5);
? Node.entity_node (6);
? Node.processing_instruction_node (7);
? Node.comment_node (8);

? Node.document_node (9);
? Node.document_type_node (10);
? Node.document_fragment_node (11);
? Node.notation_node (12).

4. DocumentFragment Type Document Fragment

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. New nodes added to a document fragment are also not part of 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. Look at the following HTML sample code:

<ul id= "MyList" ></ul>
Let's say we want to add 3 list items to this <ul> element. Adding list items One by one will cause the browser to render (render) new information over and over again. To avoid this problem, you can use a document fragment as follows to save the created list items, and then add them to the document once.
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);

In this example, we first create a document fragment and get a reference to the <ul> element. Then, 3 list items are created through a for loop, and their order is represented by text. To do this, you need to create a <li> element, create a text node, and then add the text node to the <li> element. The <li> element is then added to the document fragment using AppendChild (). After the loop is finished, call AppendChild () and pass in the document fragment to add all the list items to the <ul> element. At this point, all child nodes of the document fragment are deleted and transferred to the <ul> element.

JS copy objects and node types