JavaScript dom (i)

The more commonly used types in DOM are element type, text type, attr type, comment type (note), Document type (DOC), DocumentFragment type.

Element type

Provides access to element tag names, child nodes, and attributes.
Nodetype:1
NodeName: element tag name, TagName is also the return label name.
Nodevalue:null.
ParentNode: It may be element or document.
Child nodes may be element,text,comment, etc.

Text type

Represents a text node, contains plain text content, cannot contain HTML code, but can contain HTML code that is escaped.
Nodetype:3
NodeName: #text
NodeValue: Text content
ParentNode: is an element.
No child nodes

attr type

The attr type represents the attribute of the element, which is the node in the attributes attribute of the element.
Nodetype:2
NodeName: Name of the attribute
NodeValue: The value of the attribute
Parentnode:null.

Node Type ChildNodes Property

Each node has a ChildNodes property that holds a NodeList object, a NodeList object that is a class array object that holds an ordered set of nodes that can be accessed by location. Although this object has the length property, it is not an instance of array. The NodeList object is unique in that it actually executes the results of the query dynamically based on the DOM structure, so that changes to the DOM structure are automatically reflected in the NodeList object.
Key points:
The arguments object can be converted to an array by using the Array.prototype.slice method. So we can also convert the NodeList object to an array.

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);//所有浏览器function covertToArray(nodes){    var array = null;    try{        array = Array.prototype.slice.call(nodes,0)l;    }catch(ex){        array = new Array();        for (var i=0,len = nodes.length;i<len;i++){            array.push(nodes[i]);        }    }    return array;}

ParentNode Property

Of course, in addition to the ChildNodes property, there is a parentnode property that points to the parent node in the document tree.
All nodes that are contained in the ChildNodes list have the same parent node, so their parentnode properties point to the same node. Each node in the ChildNodes list is sibling to each other, and can be accessed to other nodes in the same list by using the PreviousSibling and NextSibling properties of each node in the list. There are also FirstChild and LastChild properties. When these two property values are equal, there is only one node in the ChildNodes list.

Ownerdocument Properties, Node creation method

1.createElement ("div"), incoming label signature
2.createTextNode ("personal"); incoming text.
3.cloneNode (True/false): This method returns a copy of the node that called the method, and if the argument is true, represents the copy child element. Otherwise, the child elements are not copied.
Here's a note: If the replicated node is bound to an event, will the copy also bind the event? Here is a discussion of the situation
(1) If the binding event is performed via AddEventListener or onclick, the replica node does not bind the event.
(2) If it is bound in inline mode:

<div onclick="show()"></div>

In this case, the replica node will also trigger the event.

4.createDocumentFragment
This method is used to create a documentfragment. DocumentFragment represents a lightweight document that is primarily used to store temporary nodes that are ready to be added to the document.
The Createdocumentfragment method is primarily used when adding a large number of nodes into the document. Suppose you want to loop a set of data and then create multiple nodes to add to the document,

<ul id="list"></ul><input type="button" value="添加多项" id="btnadd"><script type="text/javascript">    document.getElementById("btnadd").onclick = function(){        var list = document.getElementById("list");        for(var i=0;i<100;i++){            var li = document.createElement("li");            li.textContent = i;            list.appendChild(li);        }    }    /*但是上面的代码会造成回流，这时候就需要用到createDocumentFragment方法*/    document.getElementById("btnadd").onclick = function(){        var list = document.getElementById("list");        var fragment = document.createDocumentFragment();        for(var i=0;i<100;i++){            var li = document.createElement("li");            li.textContent = i;            fragment.appendChild(li);        }        list.appendChild(fragment);    }</script>

DocumentFragment is not part of the document tree, it is stored in memory, so it does not cause reflow problems. The resulting Li node is added to the fragment and last added to the list at once.

Create API Summary

Mainly includes these methods: Createelemnt,createtextnode,clonenode,createdocumentfragment four methods.
Here are a few points to note:
(1) The nodes they create are just an isolated node that is added to the document via AppendChild.
(2) CloneNode be aware of issues such as whether the replicated node contains child nodes and event bindings.
(3) Use Createdocumentfragment to resolve performance issues when adding a large number of nodes.

JavaScript dom (i)