JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript HTML DOM Navigation

The HTML DOM allows JavaScript to 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 are text nodes
  • Every HTML attribute is an attribute node (deprecated)
  • All comments are comment nodes
DOM HTML tree

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

New nodes can be created, and all nodes can be modified or deleted.


Node Relationships

Nodes in a node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships.

  • In a node tree, the top node is called the root (or root node)
  • Every node has exactly one parent, except the root (which has no parent)
  • A node can have a number of children
  • Siblings (brothers or sisters) are nodes with the same parent
DOM HTML Navigation

From the HTML above you can read:

AND:

  • <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 (a text node): "DOM Nodes"
  • <p> has one child (a text node): "Hello, world"
  • <h1> and <p> are siblings

Navigating Between Nodes

You can use the following node properties to navigate between nodes with JavaScript:



Accessing the Child Nodes

You can use the firstChild property of the DOM node to access the first direct child node of a node.

Run code

Note: In the above example, the output will be #text because a text node is inserted to maintain the whitespace between tags. Any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on.

However, if you remove the whitespaces, the #text nodes are not inserted and the span element becomes the paragraph's first child:

Run code

Accessing the first child can also be done like this:

Run code

You can use the lastChild property of the DOM node to access the last direct child node of a node.

Run code

To avoid the issue with firstChild and lastChild returning #text or #comment nodes, you could alternatively use:

The firstElementChild property returns the first child element of the specified parent element.

Run code

The lastElementChild property returns the last child element of the specified parent element.

Run code

Note: The nodeName is a read-only property that returns the name of the current node as a string.


Accessing the Parent Nodes

You can use the parentNode property to access the parent of the specified node in the DOM tree.

Run code

You can also use the parentElement property to return the parent element of the specified element.


Accessing the Sibling Nodes

You can use the previousSibling and nextSibling properties to access the previous and next node in the DOM tree.

Run code

Alternatively, you can use the previousElementSibling and nextElementSibling to get the previous and next sibling element skipping any whitespace text nodes.

Run code

The textContent property represents the text content of a node.


DOM Root Nodes

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

The document.body property sets or returns the document's <body> element.

Run code

The document.documentElement property returns the document's <html> element.

Run code

The nodeType Property

The nodeType property returns the node type, as a number, of the specified node.

Run code

The DOM tree is consists of different types of nodes, such as elements, text, comments, etc.

Every node has a nodeType property that you can use to find out what type of node you are dealing with.

The following table lists the most important node types:

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