Traversing and Manipulating DOM Sibling Elements

function highlightSibling(elementId, direction = 'next') {
  const element = document.getElementById(elementId);
  if (!element) {
    console.error(`Element with ID '${elementId}' not found.`);
    return;
  }

  let sibling;
  if (direction === 'next') {
    sibling = element.nextElementSibling;
  } else if (direction === 'prev') {
    sibling = element.previousElementSibling;
  } else {
    console.warn('Invalid direction. Use "next" or "prev".');
    return;
  }

  if (sibling) {
    // Remove highlight from all siblings first (optional, for single highlight)
    Array.from(element.parentElement.children).forEach(child => {
      child.classList.remove('highlight-sibling');
    });
    sibling.classList.add('highlight-sibling');
    console.log(`Highlighted ${direction} sibling:`, sibling.textContent);
  } else {
    console.log(`No ${direction} sibling found for ${element.textContent}`);
  }
}

// Example HTML structure:
// <ul id="myList">
//   <li>Item A</li>
//   <li id="currentItem">Item B</li>
//   <li>Item C</li>
//   <li>Item D</li>
// </ul>

// Call to highlight the next sibling of 'currentItem'
highlightSibling('currentItem', 'next');

// Call to highlight the previous sibling of 'currentItem' after a delay
setTimeout(() => {
  highlightSibling('currentItem', 'prev');
}, 2000);

// CSS for highlight-sibling class
// .highlight-sibling { background-color: yellow; }