"JavaScript"--dom

The DOM (Document Object model) is an API (application interface) for HTML and XML documents. The DOM depicts a hierarchical tree of nodes that the developer joins, removes, and changes to a portion of the page.

The DOM provides two node interfaces, a node interface, and a document interface, and the properties and methods of the two interfaces basically include all operations on the node tree.

So what is the node tree?

Node tree: When loading an HTML page, the Web browser generates a tree structure that represents the internal structure of the page. The DOM understands such a tree structure as composed of nodes.

For example, the following HTML code:

The resulting node tree is as seen below:
It can be seen from the node tree that the nodes are divided into three types, element nodes, text nodes, attribute nodes. The methods and properties of the document interface and the node interface provided in the DOM are the operations of these nodes (additional pruning).
above said, we use the document interface (documents) Some of the methods of the HTML node tree operation is some additions and deletions, then in the additions and deletions to check before we have to have a node bar. These nodes can be written directly in HTML, can also be created with JavaScript scripts, and of course, the advantage of using JavaScript to create nodes is the ability to dynamically change the HTML document. Avoids the direct changes in the HTML interface code, so that not only the HTML page and JavaScript script decoupling and the role. It also enables JavaScript scripts to manipulate HTML pages dynamically. 

The following image is part of the document interface properties and methods

From the above image can be seen, the document interface method can be used to create or get a node, created into three kinds, namely, element node, attribute node, text node, access methods are divided into two kinds.
Unfortunately, the methods and properties I have enumerated are not exhaustive, but these methods are often used.
The following is a description of some node node relationships and types of nodes, as well as some of the methods of the node interface, these methods on the side of the addition and deletion changes.

In the picture above. There are two ways to join nodes in the node interface, such as deleting, replacing, copying, and other operations.

Pasting HTML code documents, some of the following are done for this part of the HTML code.
1. Create element node p, and text node Tex. and the text node is added below the element node p. Codes and controls such as the following
Window.onload=function () {var box=document.getelementbyid (' box ');//Find Box node var p =document.createelement (' P ');// Just create the element node p. has not been added to the document, just resides in memory. Box.appendchild (P);//Join node. P is the name of the node.
var text =document.createtextnode (' This node is the last child node of the current node ');//Create Text node text mainstream in memory. Not yet added to the HTML.
P.appendchild (text);//Add textual element to p node};



2. Insert node (inserted before a node)
Window.onload=function () {var box=document.getelementbyid (' box '); var div =document.createelement (' div ');// Only the Create element node P has not been added to the document. is only resident in memory.
Box.parentNode.insertBefore (Div,box);  First, jump the pointer to the parent node of the insertion position, and then run the Insert var text =document.createtextnode (' Test it! ');//Create Text node Textdiv.appendchild (text);//Add textual element to p node};
3. Define your own method. Insert node (after a node)
Inserting a node (after a node) takes advantage of creating a function that includes insertbefore () to pass the target node to the Insert node seat. function InsertAfter (newelement,targetelement) {var  parent =targetelement.parentnode;                  To get the parent node, the body is assumed to be   more hierarchical, the parent node is not necessarily the body if (parent.lastchild==targetelement) {                         //infer whether the target node is the last node of the parent element. If so, run the appendchild () operation Parent.appendchild (newelement,targetelement)}else{//If the target node is not the last node of the parent. The target node pointer is moved down one bit to get its sibling node Parent.insertbefore (newelement,targetelement.nextsibling)    //So that it can be inserted after the target node.
}}  Window.onload=function () {var box=document.getelementbyid (' box '); var p =document.createelement (' P '); InsertAfter (P,box); var text=document.createtextnode (' Insert a text node here ');    P.appendchild (text); };
4. Remove the node code with the following example
Window.onload=function () {var box=document.getelementbyid (' box '); alert (' You are going to remove the first Test div '); Box.removechild ( BOX.CHILDNODES[1])         //Remove the first child node of box. Alert (' You are going to remove the entire box '); Box.parentNode.removeChild (box);           Remove the entire box. };


5. Replace node
Window.onload=function () {var box=document.getelementbyid (' box '); var p =document.createelement (' P ');//simply create element node p Not yet added to the document. is only resident in memory. Box.parentNode.insertBefore (P,box);  First, jump the pointer to the parent node of the insertion position, and then run the Insert var text =document.createtextnode (' Test it!
');//Create Text node Textp.appendchild (text);//Add text element to p node alert (' You're going to change the first Test div to ' test it '); Box.replacechild (p,box.childnodes [1]);};
6. Cloning nodes
Window.onload=function () {var box=document.getelementbyid (' box '); var clone = Box.childnodes[1].clonenode (true); Gets the second child node, which is true for copy content     Box.appendchild (clone);};
Summary
The above is the node operation part of the method, node operation method Not only these, there are a lot of very much, we learn DOM, is to learn the object inside the method and the use of properties. I hope we can use it frequently in future projects. PS one sentence. Have found these methods of the properties of the dead or delete to change the operation, first check, in operation, above some of the operations are in accordance with this step.

 
"JavaScript"--dom