SHARE THIS PAGE

HTML DOM

DOM HOME DOM Intro DOM Nodes DOM Methods DOM Properties DOM Access DOM Modify DOM Content DOM Elements DOM Events DOM Navigation DOM Summary

DOM Examples

DOM Examples 1 DOM Examples 2

DOM Reference

HTML DOM Objects

HTML DOM Navigation

« Previous

Next Chapter »

With the HTML DOM, you can navigate the node tree using node relationships.

HTML DOM Node List

The getElementsByTagName() method returns a node list. A node list is an array of nodes.

The following code selects all <p> nodes in a document:

Example

var x=document.getElementsByTagName("p");

The nodes can be accessed by index number. To access the second <p> you can write:

y=x[1];

Try it yourself »

Note: The index starts at 0.

HTML DOM Node List Length

The length property defines the number of nodes in a node-list.

You can loop through a node-list by using the length property:

Example

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

Try it yourself »

Example explained:

Get all <p> element nodes
For each <p> element, output the value of its text node

Navigating Node Relationships

You can use the three node properties; parentNode, firstChild, and lastChild, to navigate in the document structure.

Look at the following HTML fragment:

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>

</body>
</html>

The first <p> element is the firstChild of the <body> element
The <div> element is the lastChild of the <body> element
The <body> element is the parentNode of the first <p> element and the <div> element

The firstChild property can be used to access the text of an element:

Example

<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

Try it yourself »

DOM Root Nodes

There are two special properties that allow access to the full document:

document.documentElement - The full document
document.body - The body of the document

Example

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

Try it yourself »

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

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

Try it yourself »

In the example above, getElementById is a method, while childNodes and nodeValue are properties.

In this tutorial we will use the innerHTML property. However, learning the method above is useful for understanding the tree structure and the navigation of the DOM.

« Previous

Next Chapter »