HTML DOM (study notes 2)_html/css_WEB-ITnose

Well, what HTML DOM is is briefly described in HTML DOM (Study Note 1). This article will record the content about HTML DOM!

1: DOM node

First, let’s take a look at the tree structure of the HTML DOM, as shown below:

This is what we have to deal with The HTML DOM is another form of expression of an HTML document. The style that is closer to the expression of our HTML document is like this, as shown in the figure below:

in In the HTML DOM, everything is a node. The HTML DOM is HTML viewed as a tree of nodes. According to the W3C's HTML DOM standard, all content in an HTML document is a node. As shown in the figure above, the entire document is a document node; each HTML element is an element node; the text of an HTML element is a text node; the text of each HTML element is a text node. Properties are attribute nodes; comments are comment nodes. Through the HTML DOM, all nodes in the tree can be accessed through JAVASCRIPT. All HTML nodes can be modified, created and deleted.

If you have studied the tree in the data structure, it is very easy to understand the characteristics of the tree data structure. However, even if you have not studied it, it is very easy to understand by looking at the picture below.

Understanding the characteristics of the tree data structure is very helpful for understanding how to find other HTML nodes through the attributes of HTML nodes!

2: DOM method

If you want to operate HTML nodes, you must first obtain the corresponding nodes, and the common way to obtain HTML nodes is There are two methods, one is: through the method of HTML nodes (mainly used to control the actions we can perform); the second is: through the attributes of HTML nodes (mainly used to control the values ​​we can get or set, and according to the tree structure Features: Get other HTML nodes associated with it)

The following are some methods we often use in actual development work:

1) The getElementById() method can return the pair with the specified ID The reference of the first object. If there are multiple HTML nodes with the same ID attribute, the first one will be returned. This method is very commonly used.

2) The getElementsByName() method can return a collection of objects with the specified name. Note that it is a collection.

3) The getElementsByTagName() method can return all elements with the specified tag name. Note that it is a collection.

3) The write() method can write HTML expressions or JavaScript code to the document.

4) The appendChild() method adds the last child node to the node.

5) The removeChild() method specifies a specified child node of the element.

6) The setAttribute() method adds the specified attribute and assigns it the specified value.

7) The getAttribute() method returns the attribute value of the specified attribute name.

Of course, there are many methods, these are the most commonly used ones. I will list all the methods in the final summary. W3C has done a good job in this work! It is very simple to use any method when connected to the Internet. Of course, if you want to understand deeply and become proficient, it is best to practice more by yourself!

3: DOM attributes

attributes usually control the status characteristics of HTML nodes. We can get or set the status value of the corresponding HTML node through the attributes of HTML nodes. .

The commonly used attributes in actual development work are as follows:

1) innerHTML attribute, used to obtain the content of HTML nodes. This attribute is very useful for obtaining or replacing the content of HTML nodes. .

2) The parentNode attribute is used to obtain the parent node of the HTML node. Note that it is single.

3) The childNodes attribute is used to obtain the child nodes of the HTML node. Note that there may be multiple.

4) attributes attribute, used to obtain the attribute set of HTML nodes.

Note: For different HTML node types, the corresponding nodeName attributes, nodeValue attributes, and nodeType attributes are different. They are classified as follows:

The nodeName attribute is used to specify HTML The name of the node:

1) nodeName is read-only.

2) The nodeName of the element node is the same as the corresponding HTML tag name.

3) The nodeName of the attribute node is the same as the corresponding HTML attribute name.

4) The nodeName of a text node is always #text.

5) The nodeName of the document node is always #document.

The nodeValue attribute is used to specify the value of HTML nodes:

1) The nodeValue of an element node is undefined or null.

2) The nodeValue of the text node is the text itself.

3) The nodeValue of the attribute node is the attribute value.

The nodeType attribute is used to specify the type of HTML node and is also read-only:

The following are the more important types of HTML nodes

1) Element node?? 1

2) Attribute node??2

3) Text node??3

4) Comment node??8

5) Document Node??9

Well, I think the above content is the core knowledge point of HTML DOM:

1) Look at HTML documents from a different perspective, Think of an HTML document as a DOM tree. All contents of the document can be mapped to nodes of the DOM tree

2) Use DOM methods to control the behavior of HTML DOM or to display its behavior. Of course, the most The key is the method of finding the corresponding HTML node.

3) Use DOM attributes to control the status of HTML DOM, get its status value or reset its status value.

However, this only gives a general understanding of the situation. It cannot flexibly control or build complex, flexible, practical, and colorful HTML pages through scripts on the client or server. If you want to achieve this, You need to continue to study in depth, comprehensively and systematically, so that your knowledge can be like a flourishing DOM tree. You are familiar with every node in the tree and can quickly locate any node you want to locate. You are familiar with the attributes of each node and can make the adjustments you want according to your needs!

It is recommended to take a look at the following document and try it out:

HTML DOM example.

HTML DOM reference.

Thanks W3C! Thank you internet!