JavaScript - DOM Navigation

Hello there, future JavaScript wizards! ? Are you ready to embark on an exciting journey through the magical world of DOM navigation? As your friendly neighborhood computer science teacher, I'm thrilled to guide you through this adventure. So, grab your virtual compass, and let's start exploring!

What are DOM Nodes?

Imagine the DOM (Document Object Model) as a family tree for your web page. Each element in this tree is called a node. Just like in a real family, these nodes have relationships with each other – parents, children, and siblings. Cool, right?

Let's look at a simple example:

<html>
  <head>
    <title>My Awesome Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

In this "family," the <html> element is the great-grandparent, <head> and <body> are its children, and so on. Each of these elements is a node in our DOM tree.

Relationship between HTML DOM Nodes

Now that we understand what nodes are, let's explore how they're related. In our DOM family tree:

Parent nodes have children
Children have parents
Siblings are nodes with the same parent

For example, in our previous HTML:

<html> is the parent of <head> and <body>
<head> and <body> are siblings
<h1> and <p> are children of <body>

Navigating Between Nodes Using JavaScript

Time to put on our explorer hats! ? JavaScript gives us some nifty tools to navigate between these nodes. Let's dive in!

Accessing the First Child Element

To get the first child of an element, we use the firstElementChild property. Here's how:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Output: H1

In this example, we're finding the first child of the <body> tag, which is our <h1> element.

Accessing the Last Child Element

Similarly, we can find the last child using lastElementChild:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Output: P

Here, we're getting the last child of <body>, which is our <p> element.

Accessing all children of HTML Element

Want to see all the children? Use children:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
    console.log(child.tagName);
}
// Output:
// H1
// P

This code loops through all children of <body> and logs their tag names.

Accessing the Parent Node of HTML Element

To find a node's parent, we use parentNode:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Output: BODY

Here, we're finding the parent of our <h1> element, which is <body>.

Accessing the Next Sibling Node

To find the next sibling, use nextElementSibling:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Output: P

This code finds the sibling that comes after our <h1>, which is the <p> element.

Accessing the Previous Sibling Node

And for the previous sibling, use previousElementSibling:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Output: H1

Here, we're finding the sibling before our <p>, which is the <h1>.

DOM Root Nodes

Every family tree has its roots, and in the DOM, we have three main ones:

document.documentElement - The root element (usually <html>)
document.head - The <head> element
document.body - The <body> element

console.log(document.documentElement.tagName); // Output: HTML
console.log(document.head.tagName); // Output: HEAD
console.log(document.body.tagName); // Output: BODY

DOM nodeName Property

Each node has a name, which we can access using the nodeName property:

let heading = document.querySelector('h1');
console.log(heading.nodeName); // Output: H1

DOM nodeValue Property

The nodeValue property gives us the value of a node. For text nodes, this is the text content:

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // Output: Welcome!

Types of Node in DOM

Not all nodes are created equal! There are different types of nodes in the DOM. Here are the main ones:

Node Type	Description	nodeType Value
Element Node	Any HTML element (like `<p>`, `<div>`, etc.)	1
Attribute Node	An attribute of an HTML element	2
Text Node	The text inside an HTML element	3
Comment Node	An HTML comment	8
Document Node	The entire document	9

DOM nodeType Property

We can use the nodeType property to determine what type of node we're dealing with:

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('This is a comment');

console.log(element.nodeType); // Output: 1 (Element Node)
console.log(textNode.nodeType); // Output: 3 (Text Node)
console.log(commentNode.nodeType); // Output: 8 (Comment Node)

And there you have it, folks! You've just navigated through the DOM like a pro. Remember, practice makes perfect, so don't be afraid to experiment with these concepts. Before you know it, you'll be traversing the DOM tree faster than a squirrel in a nut factory! ?️

Happy coding, and may the DOM be with you! ?

Credits: Image by storyset

Previous Tutorial:

JavaScript - DOM Animation

Next Tutorial:

JavaScript - DOM Collections