HTML Dom tutorial 5-html Dom node access
1: common methods for finding and accessing nodes
Getelementbyid () and getelementsbytagname () can be used to find any HTML element in the entire HTML document.
The two methods ignore the structure of the document. If you want to find all the <p> elements in the document, getelementsbytagname () will find them all, no matter which level the <p> element is in the document. At the same time, the getelementbyid () method returns the correct element, no matter where it is hidden in the document structure.
These two methods provide any HTML elements you need, regardless of their location in the document!
Getelementbyid () can return elements through the specified ID:
2.1. getelementbyid () Syntax: Document. getelementbyid ("ID ");
Note: getelementbyid () cannot work in XML. In the XML document, you must search by Attributes With the type ID, And this type must be declared in the xml dtd.
The getelementsbytagname () method returns all elements (as a node list) using the specified tag name. These elements are the descendants of the elements when you use this method.
Getelementsbytagname () can be used for any HTML element:
2.2 getelementsbytagname () Syntax: Document. getelementsbytagname ("tag name ");Or: Document. getelementbyid ('id'). getelementsbytagname ("tag name ");
2.3 instance
Example 1: The following example returns a list Of all <p> elements in the document:
Document. getelementsbytagname ("p ");
Example 2: In the following example, a node list of all <p> elements is returned, and these <p> elements must be descendants of the element whose ID is "maindiv:
Document. getelementbyid ('maindiv '). getelementsbytagname ("p "); 3: node list (nodelist)
When we use the node list, we usually need to save the list in a variable, like this:
VaR x = Document. getelementsbytagname ("p ");
Now, variable X contains a list of all <p> elements on the page, and we can access these <p> elements through their index numbers.
Note: The index number starts from 0.
You can use the Length attribute to traverse the node list cyclically:
VaR x = Document. getelementsbytagname ("p ");
For (VAR I = 0; I <X. length; I ++)
{
// Do something with each paragraph
}
You can also access a specific element through the index number.
To access the third <p> element, you can write as follows: var y = x [2];
4: parentnode, firstchild, and lastchild
The three attributes parentnode, firstchild, and lastchild can follow the structure of the document and perform "short-distance travel" in the document ".
See the following HTML snippet:
<Table><Tr>
<TD> JOHN </TD>
<TD> Doe </TD>
<TD> Alaska </TD>
</Tr>
</Table>
The preceding htmlCodeThe first <TD> is the first child element (firstchild) of the <tr> element, and the last <TD> is the last child element (lastchild) of the <tr> element ).
<Tr> is the parent node of each <TD> element ).
The most common use of firstchild is to access the text of an element:
VaR x = [A paragraph];
VaR text = x. firstchild. nodevalue;
The parentnode attribute is often used to change the structure of a document. Assume that you want to delete a node with the ID "maindiv" from the document:
VaR x = Document. getelementbyid ("maindiv ");
X. parentnode. removechild (X );
First, you need to find the node with the specified ID, then move it to its parent node and execute the removechild () method.
4: Root Node
There are two special document attributes available for accessing the root node:
The first attribute can return the document root node that exists in XML and HTML documents.
The second property is a special extension of the HTML page, providing direct access to the <body> tag.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
