js 获取兄弟元素

// 获取兄弟元素的示例代码

// 假设我们有以下 HTML 结构：
// <div>
//   <p id="first">First</p>
//   <p id="second">Second</p>
//   <p id="third">Third</p>
// </div>

// 1. 获取下一个兄弟元素（下一个同级元素）
function getNextSibling(element) {
  let next = element.nextElementSibling;
  // 如果下一个元素存在，则返回该元素，否则返回 null
  return next ? next : null;
}

// 2. 获取上一个兄弟元素（上一个同级元素）
function getPreviousSibling(element) {
  let prev = element.previousElementSibling;
  // 如果上一个元素存在，则返回该元素，否则返回 null
  return prev ? prev : null;
}

// 使用示例
let secondElement = document.getElementById('second');
let nextSibling = getNextSibling(secondElement); // 获取 'third' 元素
let previousSibling = getPreviousSibling(secondElement); // 获取 'first' 元素

console.log(nextSibling.id); // 输出: third
console.log(previousSibling.id); // 输出: first

解释说明：

• nextElementSibling：获取当前元素的下一个兄弟元素。如果当前元素是最后一个子元素，则返回 null。
• previousElementSibling：获取当前元素的上一个兄弟元素。如果当前元素是第一个子元素，则返回 null。
• 这两个方法只返回同级的元素节点，不包括文本节点或注释节点。