Efficiently Traversing the DOM Tree with JavaScript

function demonstrateDOMTraversal(elementId) {
    const startElement = document.getElementById(elementId);
    if (!startElement) {
        console.error(`Element with ID '${elementId}' not found.`);
        return;
    }

    console.log('--- Starting Traversal from:', startElement.id, '---');

    // 1. Getting the Parent Element
    const parent = startElement.parentElement;
    console.log('Parent Element:', parent ? parent.tagName : 'No Parent');

    // 2. Getting Child Elements
    console.log('Child Elements:');
    Array.from(startElement.children).forEach((child, index) => {
        console.log(`  Child ${index + 1}:`, child.tagName, child.id || '');
    });

    // 3. Getting the First and Last Child
    const firstChild = startElement.firstElementChild;
    const lastChild = startElement.lastElementChild;
    console.log('First Child:', firstChild ? firstChild.tagName : 'None');
    console.log('Last Child:', lastChild ? lastChild.tagName : 'None');

    // 4. Getting Sibling Elements
    const nextSibling = startElement.nextElementSibling;
    const previousSibling = startElement.previousElementSibling;
    console.log('Next Sibling:', nextSibling ? nextSibling.tagName : 'None');
    console.log('Previous Sibling:', previousSibling ? previousSibling.tagName : 'None');

    console.log('--- Traversal Complete ---');
}

// Example Usage:
// Assume HTML structure:
// <div id="grandparent">
//     <div id="parent1">
//         <span id="targetElement">Hello</span>
//         <p id="siblingP"></p>
//     </div>
//     <div id="parent2"></div>
// </div>
demonstrateDOMTraversal('targetElement');