A guide to DOM traversal in JavaScript

• Understanding the DOM Tree
• Selecting Elements
• DOM Traversal
• Iterating Over Child Elements
• Navigating the DOM with NodeLists

The Document Object Model (DOM) is a tree-like representation of a webpage's structure. It enables developers to manipulate webpages by changing element attributes, content, and style. As a JavaScript developer, you will find yourself working with the DOM quite frequently.

¶Understanding the DOM Tree

Think of the DOM as a tree with different nodes. Each node represents an object such as an HTML element, an attribute, or text content. The topmost node is the document object, and beneath it are the html node, head and body nodes, then HTML elements within such as div, span, main, and so forth.

¶Selecting Elements

Before you can traverse the DOM, you first need to select the element(s) you'll be working with. Here are a few ways to select elements:

let elementById = document.getElementById('elementId'); 
let elementsByClass = document.getElementsByClassName('className'); 
let elementsByTag = document.getElementsByTagName('tagName'); 
let singleElement = document.querySelector('.className #elementId tagName'); 
let multipleElements = document.querySelectorAll('.className #elementId tagName');

¶DOM Traversal

Once you've selected an element, you can traverse the DOM to select relative elements (siblings, parents, or children). Here's how you can traverse different parts of the DOM:

1. Parent Element: The parentNode or parentElement property returns the parent node of an element.

let parent = document.getElementById('elementId').parentNode;

2. Child Elements: childNodes returns a NodeList including all child nodes, whereas children returns an HTMLCollection of only child elements.

let childNodes = document.getElementById('elementId').childNodes;
let childElements = document.getElementById('elementId').children;

You can also use firstChild, lastChild, firstElementChild, and lastElementChild to select the first and last child nodes or elements.

3. Sibling Elements: nextSibling and previousSibling return the next and previous sibling nodes, respectively. If you want to select only element nodes, use nextElementSibling and previousElementSibling.

let nextElementSibling = document.getElementById('elementId').nextElementSibling;
let previousElementSibling = document.getElementById('elementId').previousElementSibling;

We've done a more in-depth article on the specifics of how to get the sibling or next element in JS.

¶Iterating Over Child Elements

The children property returns a live HTMLCollection, which you can iterate over like an array:

let childElements = document.getElementById('elementId').children;

for (let i = 0; i < childElements.length; i++) {
    console.log(childElements[i]);
}

¶Navigating the DOM with NodeLists

When using methods like childNodes, you receive a NodeList. NodeLists and HTMLCollections are array-like but don't have many array methods. To use array methods, you need to convert them to a real array:

let childNodes = Array.from(document.getElementById('elementId').childNodes);

childNodes.forEach(node => console.log(node));

Understanding the DOM is crucial to manipulating HTML documents. By traversing the DOM, you can select any element in the document and manipulate it however you want. As you've seen, vanilla JavaScript provides a number of properties and methods to navigate the DOM tree. By mastering these, you will significantly enhance your JavaScript coding skills.