JavaScript usage examples for adding, deleting, modifying and checking web page nodes

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:

Copy code The code is as follows:

        jsdivnode

1、节点

复制代码代码如下:

" "

2. node

Copy code The code is as follows:

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels：

javascript Add, delete, modify and check usage Web page node

source：php.cn

Previous article：JavaScript method to change web page background and font color_javascript skills Next article：jQuery uses control nodes to complete parameter transfer only in the foreground through the get method_jquery

Statement of this Website

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

JavaScript usage examples for adding, deleting, modifying and checking web page nodes_javascript skills