JavaScript DOM Navigation
JavaScript Basics

JavaScript DOM Navigation

JavaScript HTML DOM Navigation

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

DOM Nodes

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

  • The entire document is a document node.
  • Every HTML element is an element node.
  • The text inside HTML elements is a text node.
  • Every HTML attribute is an attribute node (deprecated).
  • All comments are comment nodes.

Node Tree

With the HTML DOM, all nodes in the node tree can be accessed, created, modified, or deleted using JavaScript.

Node Relationships

Nodes in the node tree have hierarchical relationships:

  • Parent: A node that has children.
  • Child: A node that has a parent.
  • Sibling: Nodes that share the same parent.
Example Node Tree:
<html>  <head>    <title>DOM Tutorial</title>  </head>  <body>    <h1>DOM Lesson One</h1>    <p>Hello world!</p>  </body></html>

From the HTML above:

  • <html> is the root node.
  • <html> has no parent.
  • <html> is the parent of <head> and <body>.
  • <head> is the first child of <html>.
  • <body> is the last child of <html>.
  • <head> has one child: <title>.
  • <title> has one child (a text node): "DOM Tutorial".
  • <body> has two children: <h1> and <p>.
  • <h1> has one child: "DOM Lesson One".
  • <p> has one child: "Hello world!".
  • <h1> and <p> are siblings.

Navigating Between Nodes

You can navigate between nodes using these properties:

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

Child Nodes and Node Values

A common mistake in DOM processing is to expect an element node to contain text directly. The text is actually in a text node within the element node.

Example:
<title id="demo">DOM Tutorial</title>‍Accessing the text content of the <title> element:let myTitle = document.getElementById("demo").innerHTML;‍Or using the node's first child:myTitle = document.getElementById("demo").firstChild.nodeValue;‍Or accessing the first child using childNodes:myTitle = document.getElementById("demo").childNodes[0].nodeValue;

All of the following examples retrieve the text of an <h1> element and copy it into a <p> element:

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

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

DOM Root Nodes

You can access the full document using these properties:

  • document.body: The body of the document.
  • document.documentElement: The entire document.
Example 1:
<!DOCTYPE html><html><body><h2>JavaScript HTML DOM</h2><p>Displaying document.body</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = document.body.innerHTML;</script></body></html>

Example 2:
<!DOCTYPE html><html><body><h2>JavaScript HTML DOM</h2><p>Displaying document.documentElement</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = document.documentElement.innerHTML;</script></body></html>

The nodeName Property

The nodeName property specifies the name of a node and is read-only.

  • nodeName of an element node is the tag name.
  • nodeName of an attribute node is the attribute name.
  • nodeName of a text node is always #text.
  • nodeName of the document node is always #document.
Example:
<h1 id="id01">My First Page</h1><p id="id02"></p>‍<script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;</script>

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

The nodeValue Property

The nodeValue property specifies the value of a node:

  • nodeValue for element nodes is null.
  • nodeValue for text nodes is the text itself.
  • nodeValue for attribute nodes is the attribute value.

The nodeType Property

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

Example:
<h1 id="id01">My First Page</h1><p id="id02"></p>‍<script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;</script>

Important nodeType Properties:

Node Type

Value

Example

ELEMENT_NODE

1

<h1 class="heading">W3Schools</h1>

ATTRIBUTE_NODE

2

class="heading" (deprecated)

TEXT_NODE

3

W3Schools

COMMENT_NODE

8

<!-- This is a comment -->

DOCUMENT_NODE

9

The HTML document itself (the parent of <html>)

DOCUMENT_TYPE_NODE

10

<!DOCTYPE html>

Type 2 is deprecated in the HTML DOM but still works. It is not deprecated in the XML DOM.

Take a look into your desired course