Easy learning JavaScript 22: DOM Programming Learning node operations

DOM programming can not only find three kinds of nodes, but also manipulate nodes, that is, create, insert, delete, replace and copy nodes. See node first

Operation Method:

Or to borrow a consistent HTML code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(1) Write () method
The write () method can insert any string into an HTML document. This method can also create a node, but the method overwrites the original entire
The HTML document, which is the contents of the original Web page, is replaced with the output of the write () method. Generally used for testing, rarely used in practice.
document.write ("<p> I will overwrite the original HTML document content! </p> ");
Operation Result:

(2) The createelement () method, the AppendChild () method, and the createTextNode () method work together
The CreateElement () method creates a new element node according to the specified label name, which has only one parameter: the node of the element being created
The name, which is a string, the reference pointer returned by the createelement () method points to a node object, which is an element node, so his
The NodeType property value is equal to 1, and the new element node is not automatically added to the document, it is just an object that exists in the JavaScript context.
The AppendChild () method can add a newly created element node to the end of a list of child nodes of a node, as the specified element node
The last child node, the return value of the method is a reference pointer to the new node. The createTextNode () method can create a
Specifies the text of a new text node, the reference pointer returned by the createTextNode () method points to a node object, which is a text node, so his
The NodeType property value is equal to 3, and only one parameter is the text string that is contained in the new text node, and the new text node is not automatically added to the article.
Instance:
Creates a new Li element node that is added to the node of the specified element var linode=document.createelement ("Li");//Create a text node with the specified text var textnode= document.createTextNode ("Jiangsu Province");//Add to the child node (text node) of the new LI element node linode.appendchild (textnode);//Get the element node var id= "City" Citynode=document.getelementbyid ("city");//Add to the end of the specified element node citynode.appendchild (liNode);
The results of the run show:
(3) InsertBefore () method
Inesrtbefore () allows you to insert a given node in front of a given child node of a specified element node, creating a section before the current element
Point. This method accepts two parameters, the first parameter is the node that is created for the new node, and the second parameter specifies the nodes. This method in addition to the insertion function
, there are also mobile functions.
Example:
Alert ("I'm popping up before inserting!") ");//Get Id=" BJ "child element node var bjnode=document.getelementbyid (" BJ ");//Get Id=" HSJJ "child element node Var hsjjnode= document.getElementById ("HSJJ");//Add to the specified child element node in front of BjNode.parentNode.insertBefore (Hsjjnode,bjnode);
Before inserting:
After inserting:
Now that we can insert it before the specified child element node, how do we insert it after the specified child element node?
Get id= "BJ" child element node var bjnode=document.getelementbyid ("BJ");//Get Id= "HSJJ" child element node Var Hsjjnode=document.getelementbyid ( "HSJJ");//Added to the specified child element node before InsertAfter (Hsjjnode.bjnode); function InsertAfter (newnode,refnode) {         // Determines refnode when the parent node of the specified child element node is the last child node         var Refnodeparent=refnode.parentnode;         if (refnodeparent) {                 //If the newnode is inserted directly into the Refnode parent node, the last child node         var lastchild=refnodeparent.lastchild;         if (refnode==lastchild) {              refnodeparent.appendchild (newNode);         } else{             //If not, gets the next sibling node of Refnode and then inserts the Var nextnode=refnode.nextsibling into the front of the sibling node             ;             Refnodeparent.insertbefore (Newnode,nextnode);}}}          
Results of the operation:

(6) Repalcechild () method and CloneNode () method
The Repalcechild () method can replace a child node in a given parent element with another child node, and the return value is a pointer to the replaced
The reference pointer to that child node. The Repalcechild () method can only complete one-way replacements, and if you need to use bidirectional substitution, you need a custom function to implement. The party
In addition to the replacement function there are mobile functions. 、
The CloneNode () method can copy the specified child nodes. Clones a node that, if true, clones the contents of the tag;
is false, only the tag name is cloned.
Example:
Alert ("I'm popping before the replacement!") ");//Get Id=" BJ "of the corresponding element sub-node var bjnode=document.getelementbyid (" BJ ");//Get Id=" HSJJ "corresponding element sub-node Var hsjjnode= document.getElementById ("HSJJ");//Gets the element node of the id= "BJ" where the parent element node is var Citynode=document.getelementbyid ("City"); Replace Citynode.replacechild (Hsjjnode,bjnode) with the element sub-nodes of id= "BJ";
The effect before the replacement:

The effect after replacement:
Above we just realized the one-way function substitution, to realize the bidirectional interchange of the node need to use two times Repalcechild () method method, we can decide
An interchange function:
Gets the corresponding element sub-node var bjnode=document.getelementbyid ("BJ") of the id= "BJ";//Gets the corresponding element sub-node of id= "Hsjj" var hsjjnode= document.getElementById ("HSJJ");//Call interchange function for bidirectional substitution repalceeach (bjnode,hsjjnode);//Custom Interchange Functions function Repalceeach (anode, BNode) {       //Get Anodeb,bnode parent node, use ParentNode property       Aparent=anode.parentnode;       Bparent=bnode.parentnode;       if (aparent&&bparent) {     //clone anode or BNode             var anode2=anode.clonenode (true);             Replace the             bparent.replacechild (anode2,bnode) separately;             Aparent.replacechild (Bnode,anode);       }}
After replacement:
(8) RemoveChild () method
The RemoveChild () method removes a child node from the byte of a given element node, and the return value is a reference to a child node that has been deleted
Pointer. When a node is deleted by the RemoveChild () method, all child nodes that are in the node will be deleted at the same time, if you want to delete a
node, but does not know which parent node it is, you can use the ParentNode property to help resolve it.
Alert ("I pop up before being deleted!") ");//Get Id=" BJ "of the corresponding element sub-node var bjnode=document.getelementbyid (" BJ ");//Use ParentNode property to Id=" BJ " Remove BjNode.parentNode.removeChild (Bjnode) from the child node;
Before deleting:

after deletion:
We continue to expand by adding a cofirm () System dialog box to each LI element node in the document to confirm the deletion of the information
, if determined, is deleted. Let's see how this can be achieved:
Get the Li Koumine node var linodes=document.getelementsbytagname ("Li");//Add the onclick response event for each LI element node for (Var i=0;i< linodes.length;i++) {         linodes[i].onclick=function () {              var flag=confirm ("OK to delete" +this.firstchild.nodevalue+ "Information?" ");              if (flag) {                    this.parentNode.removeChild (this);}}}         
Click Effect:



Easy learning JavaScript 22: DOM Programming Learning node operations