HTML DOM (Learning Note II)

Well, in the HTML DOM (study note i) briefly describes what the HTML DOM is, this article will be recorded about the content of the HTML DOM!

1:dom node

First, look at the tree structure of the HTML DOM, as shown in:

That's what we're dealing with. The HTML DOM is another form of representation of an HTML document, and the style that is closer to the representation of our HTML document is as follows:

In the HTML DOM, all things are nodes. HTML DOM is the HTML that is considered a node tree. According to the World wide HTML DOM standard, all content in the HTML document is a node, as shown, 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 attribute of each HTML element is an attribute node, and a comment is a comment node. Through the HTML DOM, all nodes in the tree can be accessed through JavaScript. All HTML nodes can be modified or created and deleted.

If you learn the tree in the data structure, it is very easy to understand the characteristics of the tree data structure, but even if you have not learned it, it is very easy to understand by looking at the diagram below.

Understanding the characteristics of tree data structures is very helpful for understanding the properties of HTML nodes to find other HTML nodes!

2:dom method

If you want to operate an HTML node, you must first obtain the corresponding node, and there are two common ways to get an HTML node, one is: through the HTML node method (mainly to control what we can do), and the second is: through the HTML node properties (mainly to control what we can get or set the value, and other HTML nodes associated with it based on the characteristics of the tree structure

Here are some of the methods we often use in our actual development work:

1) The getElementById () method returns a reference to the first object that owns the specified ID, which is very common if the id attribute of multiple HTML nodes is the same.

2) The Getelementsbyname () method returns the collection of objects with the specified name, note that it is a collection.

3) The getElementsByTagName () method returns all the elements with the specified label name, note that it is a collection.

3) The Write () method writes an HTML expression or JavaScript code to a 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 property and assigns the specified value to it.

7) The GetAttribute () method returns the property value for the specified property name.

Of course, there are a lot of methods, these are the most commonly used, the final summary of the time I will all the methods are listed, this work has been done very well! Using any method in the case of networking is also very simple, of course, if you want to understand the depth and proficiency of the best of their own extra practice!

3:dom Property

Attributes usually control the state attributes of an HTML node, and we can get or set the state value of the corresponding HTML node through the attributes of the HTML node.

The properties commonly used in the actual development work are as follows:

1) The innerHTML property, which gets the contents of an HTML node, is useful for getting or replacing the contents of an HTML node.

2) The ParentNode property, which gets the parent node of the HTML node, is a single note.

3) childnodes attribute, used to get the child nodes of the HTML node, note that most likely are multiple.

4) The Attributes property, which gets the set of attributes for the HTML node.

Note: The values of the corresponding NodeName property, NodeValue property, and NodeType property for different HTML node types are not the same, and are categorized as follows:

The NodeName property is used to specify the name of the HTML 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 property name.

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

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

The NodeValue property is used to specify the value of the HTML node:

1) The nodevalue of the 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 property value.

The NodeType property is used to specify the type of HTML node and is read-only:

Here are some of the more important types of HTML nodes

1) Element Node--1

2) attribute node--2

3) Text version node--3

4) Note Node--8

5) Document Node--9

Well, I think the above is the most important knowledge point of the HTML DOM:

1) Look at the HTML document in a different perspective, treat the HTML document as a DOM tree, and all the contents of the document can be mapped as nodes of the DOM tree

2) using DOM methods to control the behavior of the HTML DOM or to show its behavior, of course, the most critical thing is to find the corresponding HTML node method.

3) Use the DOM property to control the state of the HTML DOM, get its state value, or reset his state value.

However, this is only a general understanding of the situation, and can not be in the client or server-side through the script flexible control or build a complex, flexible and practical, colorful HTML page, if you want to achieve this point need to continue in-depth, comprehensive, systematic study, Let your knowledge be like a thriving DOM tree. I know every node in the tree, and can quickly locate any node that you want to locate, and be familiar with the attributes of each node to make the adjustments you want according to your own needs!

It is recommended to take a look at the following documentation and hands-on labs:

An instance of the HTML Dom.

HTML DOM Reference.

Thanks w3c! Thanks for the internet!

HTML DOM (Learning Note II)