JS 获取兄弟节点|极客笔记

JS 获取兄弟节点

在前端开发中，有时我们需要通过JavaScript操作HTML元素的兄弟节点。兄弟节点是指与当前节点在DOM树中具有相同父节点的节点。在本文中，我们将介绍如何使用JavaScript来获取兄弟节点的方法。

获取兄弟节点的方法

1. 使用 `previousSibling` 和 `nextSibling`

previousSibling 属性返回指定节点之前的节点（前一个兄弟节点），nextSibling 属性返回指定节点之后的节点（后一个兄弟节点）。但需要注意的是，这两个属性获取的节点包括文本节点、注释节点等，因此我们通常需要通过循环来找到我们需要的元素节点。

示例代码如下：

// 获取元素的前一个兄弟节点
function getPreviousSibling(element) {
  var sibling = element.previousSibling;
  while (sibling && sibling.nodeType !== 1) {
    sibling = sibling.previousSibling;
  }
  return sibling;
}

// 获取元素的后一个兄弟节点
function getNextSibling(element) {
  var sibling = element.nextSibling;
  while (sibling && sibling.nodeType !== 1) {
    sibling = sibling.nextSibling;
  }
  return sibling;
}

// 示例
var elem = document.getElementById('myElement');
var prevSibling = getPreviousSibling(elem);
var nextSibling = getNextSibling(elem);

console.log(prevSibling);
console.log(nextSibling);

在上面的示例中，getPreviousSibling 和 getNextSibling 函数分别用来获取指定元素的前一个兄弟节点和后一个兄弟节点。注意在循环中判断节点类型，确保获取的是元素节点而不是其它类型的节点。

2. 使用 `previousElementSibling` 和 `nextElementSibling`

为了避免获取到文本节点和注释节点，我们可以使用 previousElementSibling 和 nextElementSibling 属性，这两个属性只返回元素节点。

示例代码如下：

// 获取元素的前一个兄弟元素节点
function getPreviousElementSibling(element) {
  return element.previousElementSibling;
}

// 获取元素的后一个兄弟元素节点
function getNextElementSibling(element) {
  return element.nextElementSibling;
}

// 示例
var elem = document.getElementById('myElement');
var prevElemSibling = getPreviousElementSibling(elem);
var nextElemSibling = getNextElementSibling(elem);

console.log(prevElemSibling);
console.log(nextElemSibling);

在上面的示例中，getPreviousElementSibling 和 getNextElementSibling 函数分别用来获取指定元素的前一个兄弟元素节点和后一个兄弟元素节点。由于这两个属性只返回元素节点，因此更加方便。