Navigating the DOM Tree with JavaScript Traversal Methods

document.addEventListener('DOMContentLoaded', () => {
  const myElement = document.getElementById('mySpecificItem');

  if (myElement) {
    console.log('Current Element:', myElement.textContent);

    // Get the parent element
    const parent = myElement.parentElement;
    console.log('Parent:', parent ? parent.tagName : 'No Parent');

    // Get the next sibling element
    const nextSibling = myElement.nextElementSibling;
    console.log('Next Sibling:', nextSibling ? nextSibling.textContent : 'No Next Sibling');

    // Get the previous sibling element
    const prevSibling = myElement.previousElementSibling;
    console.log('Previous Sibling:', prevSibling ? prevSibling.textContent : 'No Previous Sibling');

    // Get the first child element
    const firstChild = parent ? parent.firstElementChild : null;
    console.log('First Child of Parent:', firstChild ? firstChild.textContent : 'No First Child');

    // Get all child elements
    const children = parent ? Array.from(parent.children) : [];
    console.log('Children of Parent:', children.map(child => child.textContent));

    // Find the closest ancestor matching a selector
    const closestAncestor = myElement.closest('.container');
    console.log('Closest .container ancestor:', closestAncestor ? closestAncestor.id : 'None');
  }
});