JavaScript HTML DOM Navigation

❮ Previous Next ❯

Using HTML DOM, you can explore the node tree by following connections between nodes.

DOM Nodes

As per the W3C HTML DOM standard, everything in an HTML document is considered a node.

The whole document is a document node.
Each HTML element is considered an element node.
The words within HTML elements are called text nodes.
Each HTML attribute is a node of attributes (deprecated).
All remarks represent comment nodes.

JavaScript can access all nodes in the node tree using the HTML DOM.

You can make new nodes, and change or remove any existing nodes.

Node Relationships

The nodes in the node tree are arranged in a hierarchy, showing their organized structure.

The words parent, child, and sibling are used to talk about relationships.

In a tree of nodes, the highest node is known as the root or root node.
Each element has only one parent, except for the root element, which doesn't have a parent.
A node can contain several child elements.
Brothers or sisters are like siblings because they have the same parent.

<html>

<head>
    <title>DOM Tutorial</title>
</head>

<body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
</body>

</html>

In the provided HTML code, you can understand:

The starting point or main part of a webpage is called "<html>."
The tag <html> doesn't have any parent elements.
The <html> tag is like the main container, and it contains two parts: <head> and <body>.
The is the initial element inside the tag.
The <body> tag is the final part inside the <html> tag.

and:

The <head> section contains only one element: <title> .
The <title> tag contains only one thing inside it: the text "DOM Tutorial".
The <body> contains two things: <h1> and <p>.
The <h1> tag has a single child element called "DOM Lesson one".
The <p> tag contains only one thing: the text "Hello world!"
The <h1> and <p> tags are like brothers and sisters.

Navigating Between Nodes

You can use these node properties to move around between nodes using JavaScript:

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

Child Nodes and Node Values

A mistake often made when working with the Document Object Model (DOM) is assuming that an element contains text.

Example:

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

The part of the webpage labeled as <title> (shown above) doesn't have any text inside.

It has a text within bold tags saying "DOM Tutorial".

You can get the text value from a node using its innerHTML property.

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

To get the content inside an HTML element, you can use the innerHTML property. It's like getting the value of the first child node.

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

Accessing the first child can also be done like this:

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

Here are three examples that show how to get the text from an <h1> heading and paste it into a <p> paragraph element.

InnerHTML

In this lesson, we're going to learn how to get the stuff inside an HTML element using something called the innerHTML property.

Yet, grasping the other techniques mentioned is beneficial for comprehending the tree layout and navigating through the DOM.

DOM Root Nodes

In HTML, there are two special features that let you reach the entire document:

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

The nodeName Property

The nodeName attribute tells us the name of a node.

nodeName is read-only
nodeName of an element node is the same as 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

Note: The word nodeName in HTML code always shows the big letters of a tag's name.

The nodeValue Property

The property called nodeValuetells you what value a node has.

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 property called nodeType can't be changed. It tells us what type a node is.

The most important nodeType properties are:

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

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

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

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript HTMLDOM</h2>
    <p>Displaying document.body</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = document.body.innerHTML;
    </script>
  </body>
</html>

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

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

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

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics