Home > Developer > JavaScript
Examples of adding, deleting, modifying, and querying usage of JavaScript For webpage nodes
This example describes how to add, delete, modify, and query a webpage node using JavaScript. Share it with you for your reference. The specific analysis is as follows:
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:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // pD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/pD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jsdivnode </title>
<Script type = "text/javascript">
Var I = 0;
Function createnode (){
If (I <9 ){
I ++;
Var option = document. createElement ("option ");
Option. value = I;
Option. innerHTML = "Node" + I. toString ();
Document. getElementById ("number"). appendChild (option );
Var p = document. createElement ("p ");
P. innerHTML = "Node" + I. toString ();
Document. getElementById ("d"). appendChild (p );
} Else
Alert ~ ");
}
Function removenode (){
If (I> 0 ){
I --;
Var s = document. getElementById ("number ");
S. removeChild (s. lastChild );
Var d = document. getElementById ("d ");
D. removeChild (d. lastChild );
} Else
Alert ("no node, delete wool ~ ");
/* Var ps = d. getElementsByTagName ("p ");*/
/* Document. getElementById ("d"). removeChild (ps [9]); */
}
Function replacenode (){
If (I> 0 ){
Var d = document. getElementById ("d ");
Var p = document. createElement ("p ");
P. innerHTML = document. getElementById ("text"). value;
Var ps = d. getElementsByTagName ("p ")
D. replaceChild (p, ps [document. getElementById ("number"). value-1]);
} Else
Alert ("no node. Replace the wool ~ ");
}
</Script>
</Head>
<Body>
<Input type = "button" value = "create node" onclick = "createnode ()"/>
<Input type = "button" value = "Delete the last node" onclick = "removenode ()"/>
<Select id = "number"> </select>
<Input type = "text" id = "text"/>
<Input type = "button" value = "replace node content" onclick = "replacenode ()"/>
<Div id = "d">
</Div>
</Body>
</Html>
1. <body> node
Copy codeThe Code is as follows: <body>
<! -- Button x2. Both buttons 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 same button x2 -->
<Input type = "button" value = "replace node content" onclick = "replacenode ()"/>
<! -- An empty layer that does not exist. As the parent node of <p>, all added <p> are subnodes of the <div> node -->
<Div id = "d">
</Div>
</Body>
2. Copy codeThe Code is as follows: <! -- The encoding and title used by the webpage are not important. The key is the following js 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 webpage */
Var I = 0;
/* There are three functions below. Called when a button is clicked */
Function createnode (){
/* Work only if there are fewer than 9 nodes on the webpage; otherwise, a window pops up */
If (I <9 ){
/* Each more node records the global variable I + 1 for the number of nodes on the current page */
I ++;
/* Create an option node, and its pointer name is also called option */
Var option = document. createElement ("option ");
/* Declare that the value attribute of the created option node is the current value of I, 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 below the option node. After this statement, the sub-node 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> be added to the <select> </select> parent node */
Document. getElementById ("number"). appendChild (option );
/* Similarly, add a <p> subnode under the <div> parent node and set the text value of the <p> subnode to Node1 */
Var p = document. createElement ("p ");
P. innerHTML = "Node" + I. toString ();
Document. getElementById ("d"). appendChild (p );
} Else
Alert ~ ");
}
Function removenode (){
/* Work only if there are more than 0 nodes in the webpage, that is, the nodes exist. Otherwise, a window pops up */
If (I> 0 ){
/* Each time a node is removed, the global variable I-1 of the current page is recorded */
I --;
/* Define the pointer s to the <select> parent node */
Var s = document. getElementById ("number ");
/* Delete the last child node under the <select> parent node, that is, <option>. If you want to delete the first child node, the parameter is changed to s. firstChild */
S. removeChild (s. lastChild );
/* Same as above, delete the last child node under the <div> Layer */
Var d = document. getElementById ("d ");
D. removeChild (d. lastChild );
/* If you want to delete the 8th <p> under <div>, perform the following operations */
/* Ps is the pointer to the <p> subnode Set */
/* Var ps = d. getElementsByTagName ("p ");*/
/* Document. getElementById ("d"). removeChild (ps [9]); */
} Else
Alert ("no node, delete wool ~ ");
}
Function replacenode (){
/* Work only if there are more than 0 nodes in the webpage, that is, the nodes exist. Otherwise, a window pops up */
If (I> 0 ){
/* Define the pointer to the <div> parent node d */
Var d = document. getElementById ("d ");
/* Create A <p> </p> node */
Var p = document. createElement ("p ");
/* Get the entered content 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 created node with the nth <p> subnode under <div>. n indicates the value-1 selected in the drop-down list. The reason is-1, this is because the Count of subnode sets and subnode groups starts from 0, while that of our users starts from 1. */
D. replaceChild (p, ps [document. getElementById ("number"). value-1]);
} Else
Alert ("no node. Replace the wool ~ ");
}
</Script>
</Head>
I hope this article will help you design javascript programs.
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
