Home > Developer > Web Develop
[JavaScript] addition, deletion, modification, and query of webpage nodes, javascript nodes
I. Basic Concepts
This part is the so-called "html dom". The so-called html dom is the Web page loading rule. It is a rule, which is also the basic formula of webpage composition.
That is, all webpages must follow the following steps:
The so-called "webpage node" is also called a Common Explanation of "DOM node". For example, the content under an html node is all content between
The html dom rules are as follows: 1. The entire document is a document node; 2. Each HTML Tag (meaning html tags such as <body> <table>, instead of simply
For example, you can draw a page into the following DOM node tree:
The official definition of html dom is as follows: html dom is the abbreviation of HTML Document Object Model (Document Object Model), and html dom is a Document Object Model specifically applicable to HTML/XHTML. Software developers can understand html dom as a Web page API. It regards each element in the webpage as an object, so that the elements in the webpage can be obtained or edited by computer language. For example, Javascript can use html dom to dynamically modify webpages.
The use of JavaScript can easily control the addition, deletion, modification, and query of webpage nodes for these DOM nodes.
Ii. Basic Objectives
Use JavaScript to add, delete, modify, and query webpage nodes. In a webpage, the following are available:
1. Add node. This button adds the node option in the drop-down menu associated with the replace button while adding nodes. If there are nine nodes in the webpage, do not add and pop-up warnings.
2. Click the delete last node button. This button reduces the node options in the drop-down menu associated with the replace button while reducing nodes.
3. Click "replace node content". First, select the node to be operated and enter the content to replace. Then, the corresponding node is replaced.
4. If the webpage does not contain any node, delete or replace the node without warning.
Iii. Production Process
You do not need to configure any environment and directly write the following code on the webpage. The specific code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // pD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/pD/xhtml1-transitional.dtd">
1. <body> node<Body> <! -- Button x2, both of which have the onclick action pointing to the corresponding function --> <input type = "button" value = "create node" onclick = "createnode () "/> <input type =" button "value =" Delete the last node "onclick =" removenode () "/> <! -- A drop-down menu without a <option> subnode. It is added at the same time as the createnode () node. --> <Select id = "number"> </select> <! -- Input box x1. Pay attention to setting the id. replacenode () should take the value of this text box --> <input type = "text" id = "text"/> <! -- Button x1, the preceding button x2 --> <input type = "button" value = "replace node content" onclick = "replacenode ()"/> <! -- An empty layer that does not exist as the parent node of <p>, the added <p> All are subnodes of the <div> node --> <div id = "d"> </div> </body>2.
<Head> <! -- The encoding and title used by the webpage are not important. The key is the following Javascript script section --> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> jsdivnode </title> <script type =" text/javascript ">/* records the global variables of the nodes on the current page */var I = 0; /* There are three functions below. When the button is clicked, it will be called */function createnode () {/*. if there are fewer than 9 nodes in the webpage, it will work. Otherwise, a window will pop up */if (I <9) {/* each time an additional node is added, the global variable I + 1 */I ++ of the number of nodes on the current page is recorded;/* The option node is created, the pointer name is also called option */var option = document. createElement ("option");/* declares that the value attribute of the created option node is the current I value, that is, when I = 1, there are subnodes such as <option value = 1> </option>. * // * Some web pages use the setAttribute () method to set properties. In practice, it is not easy to use */option. value = I;/* set the text under the option node. After this statement, the subnode becomes <option value = 1> Node1 </option> */option. innerHTML = "Node" + I. toString ();/* <select> the ID of the parent node is number, this statement requires that <option value = 1> Node1 </option> */document be added to the <select> </select> parent node. getElementById ("number "). appendChild (option);/* same as above, add <p> subnode under <div> parent node, and the text value in the <p> subnode is Node1 */var p = document. createElement ("p"); p. innerHTML = "Node" + I. toString (); document. getElementById ("d"). appendChild (p);} elsealert ~ ");} Function removenode () {/* work only if there are more than 0 nodes on the webpage, that is, there are nodes. Otherwise, the window will pop up */if (I> 0) {/* each time a node is removed, the global variable I-1 */I -- is recorded for the number of nodes on the current page --; /* define the pointer to the <select> parent node s */var s = document. getElementById ("number");/* Delete the last subnode of the <select> parent node, that is, <option>. If you want to delete the first subnode, the parameter is changed to s. firstChild */s. removeChild (s. lastChild);/* same as above, delete the last subnode under the <div> Layer */var d = document. getElementById ("d"); d. removeChild (d. lastChild);/* if you want to delete the 8th <p> subnode under <div>, perform the following operations * // * ps refers to the <p> subnode set Needle * // * var ps = d. getElementsByTagName ("p"); * // * document. getElementById ("d "). removeChild (ps [9]); */} elsealert ("no node, delete wool ~ ");} Function replacenode () {/* work only if there are more than 0 nodes on the webpage, that is, there are nodes. Otherwise, the window will pop up */if (I> 0) {/* defines the pointer d */var d = document to the <div> parent node. getElementById ("d");/* Create A <p> </p> node */var p = document. createElement ("p");/* Get the content entered in the text box and put it in the <p> </p> node */p. innerHTML = document. getElementById ("text "). value;/* ps is the pointer to the <p> subnode set and subnode group under the <div> parent node */var ps = d. getElementsByTagName ("p")/* replace the nth <p> subnode under <div> with the created node, here, n is the value-1 selected from the drop-down list. The reason why n is-1 is because of The count starts from 0, and the count of our people starts from 1. */D. replaceChild (p, ps [document. getElementById ("number"). value-1]);} elsealert ("no node, replace the wool ~ ") ;}</Script>
Add, delete, modify, and query using javascriptUse XMLHttpRequest
The following are examples.
Function commitEdit (type, val, id ){
Var http_request = false;
If (window. XMLHttpRequest) {// Mozilla, Safari ,...
Http_request = new XMLHttpRequest ();
If (http_request.overrideMimeType ){
Http_request.overrideMimeType ('text/xml ');
}
} Else if (window. ActiveXObject) {// IE
Try {
Http_request = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
Try {
Http_request = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){}
}
}
If (! Http_request ){
Alert ('Giving up :( Cannot create an XMLHTTP instance ');
Return false;
}
Var sendData = "val =" + val + "& type =" + type + "& id =" + id;
Http_request.onreadystatechange = function () {alertContents (http_request, type );};
Url = "listUpdate. jsp ";
Http_request.open ('post', url, true );
Http_request.setRequestHeader ("Content-Length", sendData. length );
Http_request.setRequestHeader ("CONTENT-TYPE", "application/x-www-form-urlencoded ");
Http_request.send (sendData );
}
Function alertContents (http_request, type ){
If (http_request.readyState = 4 ){
Var resTxt = trimString1 (http_request.responseText );
If (resTxt = "-1 "){
Alert ("the content is unhealthy. An error occurred while adding it! ");
Return ...... remaining full text>
Use javascript to perform XML addition, deletion, modification, and query. To obtain attribute nodes, I used IE9 and Firefox 360 browser prawns to answer the question. All the content I gave meI suggest you use the js framework to operate xml very easily.
In addition, you can take a look at the tutorial in Baidu Library for javascript operation xml. the following URL:
Wenku.baidu.com/..c.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
