How To Traverse the DOM
Free tutorials covering computers, networking, programming, Windows, Linux, web design, databases, and much more. I hope you find o Technology Tutorial’s pages helpful. Please feel free to contact me or drop a comment if you have any questions.
How To Traverse the DOM
The previous tutorial in this series, How to Access Elements in the DOM, covers how to use the built-in methods of the
document object to access HTML elements by ID, class, tag name, and query selectors. We know that the DOM is structured as a tree of nodes with the
document node at the root and every other node (including elements, comments, and text nodes) as the various branches.
In this tutorial, we will go over how to traverse the DOM (also known as walking or navigating the DOM) with parent, child, and sibling properties.
To begin, we will create a new file called
nodes.html comprised of the following code.
<!DOCTYPE html> <html> <head> <title>Learning About Nodes</title> <style> * border: 2px solid #dedede; padding: 15px; margin: 15px; html margin: 0; padding: 0; body max-width: 600px; font-family: sans-serif; color: #333; </style> </head> <body> <h1>Shark World</h1> <p>The world's leading source on <strong>shark</strong> related information.</p> <h2>Types of Sharks</h2> <ul> <li>Hammerhead</li> <li>Tiger</li> <li>Great White</li> </ul> </body> <script> const h1 = document.getElementsByTagName('h1')0; const p = document.getElementsByTagName('p')0; const ul = document.getElementsByTagName('ul')0; </script> </html>
When we load the file in a web browser, we’ll see rendering that looks like the following screenshot.
In this example website, we have an HTML document with a few elements. Some basic CSS has been added in a
style tag to make each element obviously visible, and a few variables have been created in the
script for ease of access of a few elements. Since there is only one of each
ul, we can access the first index on each respective
document object is the root of every node in the DOM. This object is actually a property of the
window object, which is the global, top-level object representing a tab in the browser. The
window object has access to such information as the toolbar, height and width of the window, prompts, and alerts. The
document consists of what is inside of the inner
Below is a chart consisting of the root elements that every document will contain. Even if a blank HTML file is loaded into a browser, these three nodes will be added and parsed into the DOM.
body elements are so common, they have their own properties on the
Open the Console in DevTools and test each of these four properties by submitting them and viewing the output. You can also test
ul which will return the elements due to the variables we added in the
The nodes in the DOM are referred to as parents, children, and siblings, depending on their relation to other nodes. The parent of any node is the node that is one level above it, or closer to the
document in the DOM hierarchy. There are two properties to get the parent —
||Parent Element Node|
htmlis the parent of
bodyis the parent of
ul, but not
liis two levels down from
We can test what the parent of our
p element is with the
parentNode property. This
p variable comes from our custom
The parent of
body, but how can we get the grandparent, which is two levels above? We can do so by chaining properties together.
parentNode twice, we retrieved the grandparent of
There are properties to retrieve the parent of a node, but only one small difference between them, as demonstrated in this snippet below.
- // Assign html object to html variable
- const html = document.documentElement;
- console.log(html.parentNode); // > #document
- console.log(html.parentElement); // > null
The parent of almost any node is an element node, as text and comments cannot be parents to other nodes. However, the parent of
html is a document node, so
parentNode is more commonly used when traversing the DOM.
The children of a node are the nodes that are one level below it. Any nodes beyond one level of nesting are usually referred to as descendants.
||First Child Node|
||Last Child Node|
||Element Child Nodes|
||First Child Element Node|
||Last Child Element Node|
childNodes property will return a live list of every child of a node. You might expect the
ul element to get three
li elements. Let’s test what it retrieves.
Output► (7) text, li, text, li, text, li, text
In addition to the three
If we attempted to change the background color of the first child node using the
firstChild property, it would fail because the first node is text.
- ul.firstChild.style.background = 'yellow';
- Uncaught TypeError: Cannot set property 'background' of undefined
lastElementChild properties exist in these types of situations to retrieve only the element nodes.
ul.children will only return the three
firstElementChild, we can change the background color of the first
li in the
- ul.firstElementChild.style.background = 'yellow';
When you run the code above, your webpage will be updated to modify the background color.
for...of loop can be used to iterate through all
- for (let element of ul.children)
- element.style.background = 'yellow';
Now, each child element will have a yellow background.
p element has both text and elements inside of it, the
childNodes property is helpful for accessing that information.
- for (let element of p.childNodes)
Output"The world's leading source on " <strong>shark</strong> " related information."
- document.body.children3.lastElementChild.style.background = 'fuchsia';
The above code will find the last element child (
li) of the fourth child element (
body and apply a style.
Using parent and child properties, you can retrieve any node in the DOM.
The siblings of a node are any node on the same tree level in the DOM. Siblings do not have to be the same type of node – text, element, and comment nodes can all be siblings.
||Previous Sibling Node|
||Next Sibling Node|
||Previous Sibling Element Node|
||Next Sibling Element Node|
Sibling properties work the same way as the children nodes, in that there is a set of properties to traverse all nodes, and a set of properties for only element nodes.
nextSibling will get the next node that immediately precedes or follows the specified node, and
nextElementSibling will only get element nodes.
nodes.html example, let’s select the middle element of
- const tiger = ul.children1;
- tiger.nextElementSibling.style.background = 'coral';
- tiger.previousElementSibling.style.background = 'aquamarine';
Running this code should have applied
coral to the background of
aquamarine to the background of
Sibling properties can be chained together, just like parent and node properties.
In this tutorial, we covered how to access the root nodes of every HTML document and how to walk the DOM tree through parent, child, and sibling properties.
With what you learned in How to Access Elements in the DOM and this tutorial, you should be able to confidently access any node in the DOM of any website.
May 22, 2018