Home >Web Front-end >JS Tutorial >JavaScript usage examples for adding, deleting, modifying and checking web page nodes_javascript skills
JavaScript usage examples for adding, deleting, modifying and checking web page nodes_javascript skills
WBOYOriginal
2016-05-16 16:16:181627browse
The example in this article describes the usage of JavaScript for adding, deleting, modifying and checking web page nodes. Share it with everyone for your reference. The specific analysis is as follows:
1. 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 the basic formula for the composition of a web page.
That is, all web pages must be written according to the rules:
... and loaded according to such rules.
The so-called "web page node" is also called the popular explanation of "DOM node". For example, the content under the html node is all the content between , and the content under the body node is .
HTML DOM is stipulated as follows: 1. The entire document is a document node; 2. Each HTML tag (meaning html tags such as
, rather than simply tags) 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 as 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 specifically applicable to HTML/XHTML. People familiar with software development can understand HTML DOM as the API of a web page. It treats each element in the web page as an object, 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 checking of web page nodes on these DOM nodes.
2. Basic goals
Use JavaScript to add, delete, modify and check nodes on the web page. In a web page there is:
1. "Add Node" button. While adding nodes, this button also adds node options in the drop-down menu associated with the "Replace Button". If there are 9 nodes in the web page, they will not be added and a warning will pop up.
2. "Delete the last node" button. This button reduces nodes while also reducing the node options in the drop-down menu associated with the "Replace Button".
3. "Replace node content" button, first select the node that needs to be operated, then enter the content to be replaced, and the corresponding node will be replaced.
4. If there are no nodes in the web page, deletion and replacement will not be allowed, and a warning will pop up.
3. Production process
There is no need to configure any environment, just write the following code directly in the web page. The specific code is as follows, and will be explained part by part below:
I hope this article will be helpful to everyone’s JavaScript programming design.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
