HTML DOM navigation


The HTML DOM enables you to navigate within a node tree using node relationships.

HTML DOM node list

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

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

Instance

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>The DOM is very useful!</p>

<script>
x=document.getElementsByTagName("p");
document.write("The innerHTML of the second paragraph is: " + x[1].innerHTML);
</script>

</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance

Note:

The subscript starts from 0.

HTML DOM node list length

The length attribute defines the number of nodes in the node list.

You can use the length attribute to loop through a list of nodes:

Instance

<html><!DOCTYPE html>
<html>
<body>

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

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

Running Instance»

Click the "Run Instance" button to view the online instance

Instance analysis:

  • Get all<p> element nodes

  • Output the value of the text node of each <p> element

Navigation node relationship

You can use three node attributes: parentNode , firstChild and lastChild to navigate within the document structure.

Please see 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 first child element (firstChild) of the <body> element

  • ##The<div> element is the <body> element The last child element (lastChild)

  • <body> element is the parent node (parentNode) of the first <p> element and <div> element

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

Example

<html><!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Run Example»Click the "Run Instance" button to view the online instance

DOM root node

There are two special attributes here that can access all documents:

  • document.documentElement - all documents

  • document.body - the body of the document

Instance

<html><!DOCTYPE html>
<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>

Run instance»Click the "Run instance" button to view the online instance

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><!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

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

In this tutorial, we will use the innerHTML property. However, learning the above method will help you understand the DOM tree structure and navigation.

←
→