In this post, we are going to see How to Use JavaScript to Traverse the DOM Tree
DOM TRAVERSRE TREE
When it comes to DOM Traversal, which requires the movement within the hierarchal or ‘tree-like’ structure of HTML so as to locate, gain access to and alter elements.
The Arrangement of the DOM Tree Elements
The DOM or Document Object Model, is a way of describing an HTML document as a tree structure. Each of the HTML elements is a node and these nodes are connected together like the branches of a family tree:
Parent: This is the node located above the element.
Children: These are nodes that are directly beneath the element.
Siblings: Are nodes that are at the same level with respect to other nodes i.e. they have the same parent element.
Simple Example to Understand DOM Traversal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Traversal Example</title>
</head>
<body>
<!-- HTML Structure -->
<div id="parent">
<p id="first">First Paragraph</p>
<p id="second">Second Paragraph</p>
<p id="third">Third Paragraph</p>
</div>
<script>
const secondParagraph = document.getElementById('second'); // Get the second paragraph
const parent = secondParagraph.parentNode;
console.log('Parent Element:', parent); // Logs the <div id="parent">
const firstChild = parent.firstElementChild;
console.log('First Child Element:', firstChild); // Logs <p id="first">
// Move to the next sibling element
const nextSibling = secondParagraph.nextElementSibling;
console.log('Next Sibling:', nextSibling); // Logs <p id="third">
// Move to the previous sibling element
const previousSibling = secondParagraph.previousElementSibling;
console.log('Previous Sibling:', previousSibling); // Logs <p id="first">
</script>
</body>
</html>
Analysis of the Sample:
Obtaining an element: The very first element we consider here is the one which has an id equal to second (the second paragraph).
Parent: Using the function parentNode we try to go one level up to the parent (the <div id=”parent”> in our case).
First Child: firstElementChild allows to get the first child (in this case it is <p id=”first”>).
Next Sibling: The next sibling element is reached using nextElementSibling function, in this case it is (<p id = ‘third’>).
Previous Sibling: The previously located sibling is accessed using previousElementSibling (<p id=”first”>).
- Useful Information for DOM Traversal:
To travel upward to a parent element, utilize the parentNode.
To reach the offspring nodes utilize childNodes or children.
To obtain the first or last child, utilize the firstChild/lastChild or firstElementChild/lastElementChild respectively.
To navigate to the ancestors’ next or previous sibling members, use the nextSibling or nextElementSibling and previousSibling or previousElementSibling respectively.
Conclusion
Moving through the DOM tree enables an organized way to reach and change elements for developers. Employing these methods efficiently aids in moving through parent, child and sibling elements which makes it possible to alter or react to different Elements within the DOM at any given time.