This article describes the use of JavaScript for web page nodes. Share it for your reference. The specific analysis is as follows:
1. Basic concepts
This part is called "HTML DOM". The so-called HTML DOM is the web page loading rules, which is a rule, which is the basic formula for web pages.
That is, all web pages must be written according to the rules of: <html><body></body></html>... and also loaded according to such rules.
The so-called "web page node" is also a popular explanation of "DOM node". For example, the content under the html node is all the content between <html></html>, and the content under the body node is all the content between <body></body>.
HTML DOM stipulates as follows: 1. The entire document is a document node; 2. Each HTML tag (meaning <body><table> and other html tags, rather than a simple <html> tag) is an element node; 3. The text contained in the HTML element is a text node; 4. Each HTML attribute is an attribute node
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, and HTML DOM is a document object model specially applied to HTML/XHTML. People familiar with software development can understand HTML DOM as a web page API. It treats each element in the web page as objects, so that the elements in the web page can also be obtained or edited by computer language. For example, Javascript can use HTML DOM to dynamically modify web pages.
Using JavaScript can easily control the addition, deletion, modification and search of web page nodes for these DOM nodes.
2. Basic Objectives
Use JavaScript to add, delete, modify and check the nodes of web pages. In a web page:
1. The "Add Node" button, while adding node options in the drop-down menu associated with the "Replace Button". If there are 9 nodes in the web page, no add and pop-up warning will be allowed.
2. The "Delete the Last Node" button, while reducing the node options in the drop-down menu associated with the "Replace Button".
3. The "Replace Node Content" button, first select the node to operate, and then enter the content to be replaced, and the corresponding node will be replaced.
4. If there are no nodes in the web page, no deletion or replacement will be allowed, and pop-up warning will be given.
3. Production process
Without configuring any environment, just write the following code on the web page. The specific code is as follows, and the following will be explained in part:
Copy the code code 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("I'm fine, there are too many nodes, I can't do it~");
}
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 nodes, delete a yarn~");
/*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 yarn~");
}
</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="replacenode content" onclick="replacenode()" />
<div id="d">
</div>
</body>
</html>
1. <body> node
Copy the code as follows:<body>
<!--Button x2, both buttons have onclick actions 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 <option> child nodes is added at the same time by the createnode() node. -->
<select id="number"></select>
<!--Input box x1, pay attention to setting the id, replacenode() to get the value of this text box-->
<input type="text" id="text" />
<!--button x1, same as button x2-->
<input type="button" value="replacenode content" onclick="replacenode()" />
<!--A empty layer with nothing, as the parent node of <p>, all the children of this <div> node are added
<div id="d">
</div>
</body>
2. <head> node
Copy the code as follows: <head>
<!--The encoding and title used by web pages is not important, the key is the following js script part-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsdivnode</title>
<script type="text/javascript">
/*Records the global variables of how many nodes there are in the current web page*/
var i = 0;
/*There are 3 functions below. When the button is clicked, it is called*/
function createnode() {
/*If there are fewer than 9 nodes in the web page, it will work, otherwise pop-up window*/
if (i < 9) {
/*Add one more node for each record the global variable i+1*/
i++;
/*Create an option node, and then its pointer name is also option*/
var option = document.createElement("option");
/*Declare the value attribute of the created option node is the current value of i, that is, when i=1, there are child nodes such as <option value=1></option>. */
/*Some web pages say that using the setAttribute() method to set attributes, but personally practiced it is not easy to use*/
option.value = i;
/*Set the text below the option node. After this statement, the child 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 the <option value=1>Node1</option>*/ is added to the parent node in the <select></select>
document.getElementById("number").appendChild(option);
/*The principle is the same as above. Add the <p>child node under the <div> parent node, and the text value under the <p>child node is Node1*/
var p = document.createElement("p");
p.innerHTML = "Node" + i.toString();
document.getElementById("d").appendChild(p);
} else
alert("I'm fine, there are too many nodes, I can't do it~");
}
function removenode() {
/*If there are more than 0 nodes in the web page, that is, there are nodes, and then only the pop-up window is
if (i > 0) {
/*For every node reduction, the global variable i-1 of the current web page is recorded.
i--;
/*Define pointer s to the parent node of <select>*/
var s = document.getElementById("number");
/*Delete the last child node under the parent node of <select>, that is, <option>. If you want to delete the first one, the parameter becomes s.firstChild*/
s.removeChild(s.lastChild);
/*The same principle 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>, please do as follows*/
/*ps is a pointer to the <p> child node set*/
/*var ps = d.getElementsByTagName("p");*/
/*document.getElementById("d").removeChild(ps[9]); */
} else
alert("No nodes, delete a yarn~");
}
function replacenode() {
/*If there are more than 0 nodes in the web page, that is, there are nodes, and then only the pop-up window is
if (i > 0) {
/*Define pointer to the parent node d*/
var d = document.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 a pointer to the <p>child node set and child node group under the <div> parent node*/
var ps = d.getElementsByTagName("p")
/*Let the node you just created replace the nth <p> child node under <div>, where n is the value -1 selected in the drop-down list now. The reason for -1 is that the count of the child node set and the group of children starts from 0, while our human count starts from 1. */
d.replaceChild(p, ps[document.getElementById("number").value - 1]);
} else
alert("No node, replace yarn~");
}
</script>
</head>
I hope this article will be helpful to everyone's JavaScript programming.