Node 1 of the HTMLDOM series tutorials)

This time, we will introduce the relevant content of DOM nodes. According to the explanation in W3CSchool, DOM stipulates that the entire document is a document node, and each HTML tag is

This time, we will introduce the relevant content of DOM nodes. According to the explanation in W3CSchool, DOM stipulates that the entire document is a document node, and each HTML Tag is an element node; the text contained in the HTML element is a text node, each HTML attribute is an attribute node, and the comment is a comment node.

So how should we differentiate these nodes? Is there any relationship between them?

In fact, there is a hierarchical relationship between them. All the nodes in the HTML document form a document tree, which is also called a node tree. Each element, attribute, and text in the HTML document represent a node in the tree. The tree begins with a document node, and then extend the branches until all the text nodes at the lowest level of the tree are reached.

Next let's take a look at the structure image of the Document Tree:

We can see that all the nodes in a document tree are associated with each other. Let's take a look at the basic structure of the HTML document,

12345678910

Basic HTML document structureBeyondweb.cn Learn together and make progress together! Beyond web, beyond yourself!

 

From the above HTML document structure, we can also see that there is an association between nodes. We can summarize the following items:

1. Each node except the document node has a parent node. For example:AndThe parent node of isThe parent node of the "BeyondWen.cn" text node is a node.

2. Most element nodes have subnodes. For example:The node has a subnode:,The Node also has a subnode: The text node "basic structure of HTML documents". </P>

3. When a node has the same parent node, they are same-level nodes. For example: and

Is the same level, because their parent nodes areNode.

4. A node can also have its descendants. Its descendants refer to all the subnodes of a node, or the subnodes of these subnodes, and so on. For example, all text nodes areThe descendant of the node, and the first text node "basic structure of HTML document" isThe descendant of the node.

5. nodes can also have their predecessors. Predecessors refer to the parent node of a node, or the parent node of a parent node, and so on. For example, all text nodes canThe node is used as the predecessor node.

With DOM, we can access every node in the HTML document. You can use the following methods to find a node:

1. getElementById () method;

2. getElementsByTagName () method;

3. parentNode attributes

4. firstChild attributes

5. lastChild attributes

Next we will introduce in detail the above methods

GetElementById () method: Get the id selector in the HTML document; getElementsByTagName () method: Get the corresponding element according to the tag name. The two methods ignore the structure of the document. If we want to find all

Element, then getElementsByTagName () will find all of them, regardless

At which level the element is in the document, and the getElementById () method returns the corresponding element regardless of the position of the element in the document structure.

The following is a detailed example to familiarize yourself with their usage:

1. getElementById () method:

1	Document. getElementById ('p1'); // obtain the element whose id selector value is p1

2. getElementsByTagName () method:

1	Document. getElementsByTagName ('P'); // return all Element

3. All

Element, and

The element must be the descendant of the element with the id of "beyondWeb:

1	Document. getElementById ('beyondweb'). getElementsByTagName ('P ');

How can we use a node set? When we use a node set, we usually save the set in a variable, for example:

1	VararrP = document. getElementsByTagName ('P ');

Now, the variable arrP contains all

A list of elements, and we can use their index numbers to access specific

Element.

We can use the length attribute to get the length of the arrP set, such as arrP. length, and then use the for () {} loop to traverse:

12345

For (vari = 0; I // do what you want}

You can also access a specific element by using a specific index number, for example, access to 5th elements:

1	Vary = x [2];

For the specific applications of parentNode, firstChild, and lastChild, We will detail them in "Node 2 of the html dom series tutorial". Please stay tuned.