HTML DOM Navigation
With the HTML DOM, you can use node relationships to navigate the node tree.
HTML DOM node list
getElementsByTagName() method returns a list of nodes . A node list is an array of nodes.
The following code selects all <p> nodes in the document:
Example
var x=document.getElementsByTagName("p");
These nodes can be accessed by subscript numbers. To access the second <p>, you can write:
y=x[1];
Notice:
Subscript numbers start at 0.
HTML DOM node list length
The length property defines the number of nodes in the node list.
You can use the length property to loop through the list of nodes:
Example
x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br>"); }
Example analysis:
Get all <p> element nodes
Output the value of the text node of each <p> element
Navigate Nodes
You can navigate the document structure using three node properties: parentNode, firstChild, and lastChild.
See the following HTML snippet:
<html> <head> <meta charset="utf-8"> </head> <body> <p>Hello World!</p> <div> <p>DOM is very useful!</p> <p>This example demonstrates the relationship of nodes.</p> </div> </body> </html>
The first <p> element is the first child of the <body> element (firstChild)
The <div> element is the last child of the <body> element (lastChild)
The <body> element is the parentNode of the first <p> and <div> elements
The firstChild property can be used to access the element's text:
Example
<p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script>
DOM root node
There are two special properties that give access to the full documentation:
document.documentElement - All documents
document.body - The body of the document
Example
<p>Hello World!</p> <div> <p>DOM is very useful!</p> <p>This example demonstrates </b>document.body<b> property.</p> </div> <script> alert(document.body.innerHTML); </script>
childNodes and nodeValue
In addition to the innerHTML property, you can also use the childNodes and nodeValue properties to get the content of an element.
The following code gets the value of the <p> element with id="intro":
Example
<p id="intro">Hello World!</p> <script> txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script>
In the above example, getElementById is a method and childNodes and nodeValue are properties.
In this tutorial, we will use the innerHTML attribute. However, learning the above method helps to understand the DOM tree structure and navigation.