JavaScript HTML DOM Navigation

Through HTML DOM, you can use node relationships to navigate the node tree.

DOM Nodes

According to the W3C HTML DOM standard, everything in the HTML document is a node:

  • The entire document is a document node
  • Each HTML element is an element node
  • Text within an HTML element is a text node
  • Each HTML attribute is an attribute node
  • All comments are comment nodes
DOM HTML Tree

With HTML DOM, all nodes in the node tree can be accessed by JavaScript.

You can create new nodes and can also modify and delete all nodes.

Node relationships

Nodes in the node tree have a certain level of relationship with each other.

  • Terms (parent, child, and sibling, parent, child, and sibling) are used to describe these relationships.
  • In the node tree, the top node is called the root (the root node has no parent).
  • Each node has a parent node, except for the root (the root node has no parent).
  • Nodes can have a certain number of children.
  • Siblings refer to nodes that have the same parent.
<html>
   <head>
       <title>DOM Tutorial</title>
   </head>
  <body>
       <h1>Lesson 1 of DOM</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML Tree

From the above HTML, you can read the following information:

  • <html> is the root node.
  • <html> has no parent.
  • <html> is the parent of <head> and <body>.
  • The <head> is the first child of <html>.
  • <body> is the last child of <html>

At the same time:

  • <head> has a child: <title>
  • <title> has a child (text node): "DOM Tutorial"
  • <body> has two children: <h1> and <p>
  • <h1> has a child: "DOM First Lesson"
  • <p> has a child: "Hello world!"
  • <h1> and <p> are siblings

Navigating between nodes

Through JavaScript, you can use the following node properties to navigate between nodes:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

child nodes and node values

A common mistake in DOM processing is to think that element nodes contain text.

Example:

<title id="demo">DOM Tutorial</title>

（the element node <title> in the above example） It does not containtext.

It contains the text "DOM Tutorial"text node.

The value of a text node can be obtained through the node's innerHTML attribute for access:

var myTitle = document.getElementById("demo").innerHTML;

Accessing the innerHTML property is equivalent to accessing the first child node's nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

You can also access the first child node in this way:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

The following three examples retrieve <h1> copy the text of the element to <p> In the element:

Example 1

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Try It Yourself

Example 2

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Try It Yourself

Example 3

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Try It Yourself

InnerHTML

In this tutorial, we use innerHTML Retrieve the content of the HTML element.

However, learning the above other methods helps to understand the tree structure and navigation of DOM.

DOM Root Node

There are two special attributes that allow access to the complete document:

  • document.body - Document's Body
  • document.documentElement - Complete Document

Example

<html>
<body>
<p>Hello World!</p>
<div>
<p>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

Example

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Try It Yourself

nodeName Property

nodeName attribute specifies the name of the node.

  • nodeName is read-only
  • the nodeName of an element node is equivalent to the tag name
  • the nodeName of an attribute node is the attribute name
  • the nodeName of a text node is always #text
  • the nodeName of the document node is always #document

Example

<h1 id="id01">My First Web Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Try It Yourself

Note:nodeName always contains the uppercase tag name of the HTML element.

nodeValue Property

nodeValue attribute specifies the value of the node.

  • the nodeValue of an element node is undefined
  • the nodeValue of a text node is the text content
  • the nodeValue of an attribute node is the attribute value

nodeType Property

nodeType property returns the type of the node.nodeType is read-only.

Example

<h1 id="id01">My First Web Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Try It Yourself

The most important nodeType property is:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (parent of <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 is deprecated in HTML DOM. Not deprecated in XML DOM.