Navigate DOM Structure (Parent, Children, Siblings)

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} ---`);

  // Get the parent element
  const parent = element.parentNode;
  console.log('Parent:', parent ? parent.tagName : 'None');

  // Get all child elements (only element nodes)
  const children = element.children;
  console.log('Children count:', children.length);
  if (children.length > 0) {
    console.log('First child:', children[0].tagName);
  }

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

  // Get the previous sibling element
  const previousSibling = element.previousElementSibling;
  console.log('Previous Sibling:', previousSibling ? previousSibling.tagName : 'None');

  // Example: finding an ancestor with a specific class
  let ancestorWithClass = element.closest('.some-ancestor-class');
  console.log('Closest ancestor with .some-ancestor-class:', ancestorWithClass ? ancestorWithClass.tagName : 'None');
}

// Example HTML:
// <div class="some-ancestor-class">
//   <ul>
//     <li>Item 1</li>
//     <li id="currentItem">Item 2</li>
//     <li>Item 3</li>
//   </ul>
// </div>

// navigateDom('currentItem');