JAVASCRIPT
Navigate the DOM Tree (Parent, Child, Sibling)
Understand how to programmatically traverse the Document Object Model (DOM) to access parent, child, and sibling elements using JavaScript properties.
function navigateDOM(elementId) {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with ID '${elementId}' not found.`);
return;
}
console.log(`--- Navigating from element #${elementId} ---`);
console.log('Current Element:', element);
// Accessing parent
const parent = element.parentElement;
console.log('Parent Element:', parent ? parent.tagName : 'No Parent');
// Accessing children (live HTMLCollection)
const children = element.children;
console.log('Children Count:', children.length);
if (children.length > 0) {
console.log('First Child:', children[0].tagName);
console.log('Last Child:', element.lastElementChild.tagName);
}
// Accessing siblings
const nextSibling = element.nextElementSibling;
console.log('Next Sibling:', nextSibling ? nextSibling.tagName : 'No Next Sibling');
const prevSibling = element.previousElementSibling;
console.log('Previous Sibling:', prevSibling ? prevSibling.tagName : 'No Previous Sibling');
console.log('------------------------------------');
}
// Usage example:
/*
HTML Structure:
<div id="parent">
<p id="prevSibling">Previous</p>
<span id="targetElement">Target</span>
<a id="nextSibling" href="#">Next</a>
</div>
*/
// navigateDOM('targetElement');
How it works: This `navigateDOM` function demonstrates various ways to traverse the DOM tree from a given element. It retrieves the parent element using `element.parentElement`, accesses all immediate child elements using `element.children` (an HTMLCollection), and finds the first/last child using `element.firstElementChild` and `element.lastElementChild`. For siblings, it uses `element.nextElementSibling` and `element.previousElementSibling`. These properties are essential for dynamically understanding and interacting with the structural relationships between elements on a webpage.