Understanding the DOM is essential in your web development career. You must know how to select different elements in the DOM so that you can read or modify their contents.
DOM traversing describes how to navigate the tree-like structure that generates an HTML document. Here’s a complete guide on traversing the DOM with JavaScript.
What is DOM traversing?
The Document Object Model, or DOM for short, is a tree-like representation of an HTML document. It provides an API that allows you as a web developer to interact with a website using JavaScript.
Each item in the DOM is known as a node. Only through the DOM can you manipulate the structure, content, and style of your HTML document.
DOM traversal (also called DOM walking or navigating) is the act of selecting nodes from other nodes in the DOM tree. You’re probably already familiar with the many ways to access elements in the DOM tree by their ID, class, or tag name. You can use methods like document.querySelector() and document.getElementById() to do this.
You can use other methods in conjunction to navigate the DOM in a more efficient and robust way. As you can imagine, it’s better to search from an already known point on the map than to do an exhaustive search.
For example, it is easier and more efficient to select a child element from its parent than to search for it in the entire tree.
A sample document to traverse
Once you have access to a given node in the DOM tree, you can access its related nodes in a variety of ways. You can move down, up, or sideways in the DOM tree from your selected node.
The first method involves searching for an element starting from the top-most node (such as the document node) and moving downwards.
The other way is the opposite: you climb the tree from an inner element, searching for an outer element. The last method is when you search for an element from another element at the same level in the document tree (meaning the two elements are siblings).
Move the DOM down
You can move the DOM to the bottom using one of two methods. The first is the generic selector method (element.querySelector or element.querySelectorAll). Secondly, you can use the Children or ChildNodes property. There are also two other special properties, namely, lastChild and firstChild.
Using selector methods
The querySelector() method allows you to search for one or more elements that match a given selector. For example, you can search for the first element with the class “first-article” by using document.querySelector(‘.first-article’) . And to fetch all h2 elements in the document, you can use the querySelectorAll method: document.querySelectorAll(‘h2’). The querySelectorAll method returns a node list of matching elements. You can select each item using bracket notation:
The major catch when using selector methods is that you must precede the selector with the appropriate symbols, just as you would in CSS. For example, “.classname” for classes and “#id” for IDs.
Remember that the result will be an HTML element, not just the inner content of the selected element.
Logging apples to the console will display a set of all list items directly under the element with the class “apple-list” as an HTML collection. An HTML collection is an array-like object, so you can use bracket notation to select items with querySelectorAll.
Unlike the children property, childnodes returns all direct child nodes (not just child elements). If you are only interested in child elements, say list items only, use the children property.
Using the Special LastChild and FirstChild Properties
These two methods are not as strong as the first two. As their names suggest, the lastChild and firstChild properties return the last and first child nodes of an element.
Traversing the DOM upwards
You can navigate the DOM using the parent element (or parentnode) and the closest properties.
Using Parent Element or ParentNode
Both the parentElement or parentNode properties let you select the parent node of the selected element one level up. The important difference is that ParentElement only selects a parent node that is an element. On the other hand, ParentNode can select a parent whether it is an element or a different node type.