"JavaScript"--dom

The DOM (Document Object model) is an API (application interface) for HTML and XML documents. The DOM depicts a hierarchical node tree that runs a developer to add, remove, and modify portions of a page.

The DOM provides two node interfaces, a node interface, and a document interface, and the properties and methods of the two interfaces basically contain all the 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 this tree structure as composed of nodes. For example, the following HTML code:

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >
The resulting node tree is as follows:
From the node tree, it can be seen that there are three types of nodes, 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 Documentation Interface (document) 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, or can be created with JavaScript scripts, of course, the advantage of using JavaScript to create nodes is the ability to dynamically modify the HTML document, to avoid the HTML interface to directly modify the code, This not only achieves the HTML page and JavaScript script decoupling and the function, but also can implement the JavaScript script dynamic manipulation HTML page. 
The following image is part of the document interface properties and methods

As can be seen from the above image, the document interface method can be used to create or get a node, created into three kinds, that is, element nodes, attribute nodes, text nodes, access methods are divided into two kinds. Unfortunately, the methods and properties I've enumerated are incomplete, but these methods are common.
The following is a description of some of the node node relationships and types of nodes, as well as some methods of the node interface, which focus on adding and removing changes.

In the above image, the node interface has two methods for adding nodes, as well as deleting, replacing, and copying operations on the node.
Paste the HTML code document, and some of the following are done for this part of the HTML code.
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >
1, create the element node P, and the text node Tex, and add the text node below the element node p, the code and contrast are as follows
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >window.onload=function () {var box=document.getelementbyid (' box ');//Find Box node var p =document.createelement (' P '); /Just create element node p, which has not been added to the document, but resides in memory. Box.appendchild (P);//Add 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 The text is mainstream in memory and not added to HTML. P.appendchild (text);//Add a text element to the P node};</span>

2. Insert node (inserted before a node)
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >//Insert node (before a node) window.onload=function () {var box=document.getelementbyid (' box '); var div =document.createelement (' div ');//Just create element node P has not been added to the document, just resides in memory. Box.parentNode.insertBefore (Div,box);  First, jump the pointer to the parent node of the insertion position, and then execute the Insert var text =document.createtextnode (' Test it! ');//Create Text node Textdiv.appendchild (text);//Add text element to p node};</span><span style= "font-family:kaiti_gb2312; font-size:18px; " > </span>
3, custom method, insert node (after a node)
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >//Insert node (after a node) use the Create a function that contains insertbefore () to pass the target node to the Insert node seat parameter. function InsertAfter (newelement,targetelement) {var  parent =targetelement.parentnode;                  Get the parent node, which is the body   if there are more levels, the parent node is not necessarily the body if (parent.lastchild==targetelement) {                         //determines whether the target node is the last node of the parent element, if, The appendchild () operation is performed 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, 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); };</span>
4, remove the node code and the following
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >window.onload=function () {var box=document.getelementbyid (' box '); alert (' You will be removing 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;};</span>

5. Replace node
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >window.onload=function () {var box=document.getelementbyid (' box '); var p =document.createelement (' P ');// Just create element node P has not been added to the document, just resides in memory. Box.parentNode.insertBefore (P,box);  First, jump the pointer to the parent node of the insertion position, and then execute 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 replace the first Test div with ' test it '); Box.replacechild (p,box.childnodes [1]);}; </span>
6. Cloning nodes
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >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);}; </span>
Summary
The above is the node operation of the partial method, the method of node operation is not only these, there are many, we learn the DOM, is to learn the object of the method and the use of properties, I hope we can be used in future projects. PS a sentence, there is no way to find the properties of these methods are dead or deleted to change the operation, first check, in operation, above some of the operations are in accordance with this step.

 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
"JavaScript"--dom