js怎么选择前后节点

JS选择前后节点的方法包括使用previousElementSibling、nextElementSibling、parentNode、childNodes等。

其中，previousElementSibling和nextElementSibling是最常用的方法，用于获取同一父节点下的前一个或后一个兄弟元素。比如，element.previousElementSibling 可以获取当前元素的前一个兄弟元素，而element.nextElementSibling 可以获取后一个兄弟元素。

一、使用 previousElementSibling 和 nextElementSibling

在JavaScript中，previousElementSibling 和 nextElementSibling 是最常用来选择前后节点的方法。这两个属性分别返回当前节点的前一个和后一个兄弟节点（元素节点），忽略文本节点和注释节点。

1. previousElementSibling

previousElementSibling 属性返回当前元素的前一个兄弟元素（如果存在）。如果不存在前一个兄弟元素，则返回 null。

let currentElement = document.getElementById("current");
let previousElement = currentElement.previousElementSibling;

2. nextElementSibling

nextElementSibling 属性返回当前元素的后一个兄弟元素（如果存在）。如果不存在后一个兄弟元素，则返回 null。

let currentElement = document.getElementById("current");
let nextElement = currentElement.nextElementSibling;

二、使用 parentNode 和 childNodes

除了 previousElementSibling 和 nextElementSibling，你还可以使用 parentNode 和 childNodes 来选择前后节点。通过访问父节点的子节点列表，你可以遍历所有兄弟节点。

1. parentNode

parentNode 属性返回当前节点的父节点。通过父节点，你可以访问所有兄弟节点。

let currentElement = document.getElementById("current");
let parentElement = currentElement.parentNode;

2. childNodes

childNodes 属性返回当前节点的所有子节点，包括元素节点、文本节点和注释节点。你可以使用它来遍历兄弟节点。

let parentElement = document.getElementById("parent");
let childNodes = parentElement.childNodes;

三、遍历兄弟节点

通过 parentNode 和 childNodes 属性，你可以遍历兄弟节点来找到前后节点。

let currentElement = document.getElementById("current");
let parentElement = currentElement.parentNode;
let childNodes = parentElement.childNodes;
let previousElement = null;
let nextElement = null;
for (let i = 0; i < childNodes.length; i++) {
  if (childNodes[i] === currentElement) {
    if (i > 0) {
      previousElement = childNodes[i - 1];
    }
    if (i < childNodes.length - 1) {
      nextElement = childNodes[i + 1];
    }
    break;
  }
}

四、结合使用 querySelectorAll

在某些情况下，你可能需要选择特定类型的前后节点。你可以结合使用 querySelectorAll 和 Array.prototype.findIndex 来实现这一点。

let elements = document.querySelectorAll(".item");
let currentElement = document.getElementById("current");
let index = Array.prototype.findIndex.call(elements, function(el) {
  return el === currentElement;
});
let previousElement = index > 0 ? elements[index - 1] : null;
let nextElement = index < elements.length - 1 ? elements[index + 1] : null;

五、示例代码

下面是一个完整的示例代码，它展示了如何使用 previousElementSibling、nextElementSibling、parentNode 和 childNodes 来选择前后节点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择前后节点</title>
</head>
<body>
  <div id="parent">
    <div class="item">Item 1</div>
    <div class="item" id="current">Item 2</div>
    <div class="item">Item 3</div>
  </div>
  <script>
    // 使用 previousElementSibling 和 nextElementSibling
    let currentElement = document.getElementById("current");
    let previousElement = currentElement.previousElementSibling;
    let nextElement = currentElement.nextElementSibling;
    console.log("Previous Element:", previousElement ? previousElement.textContent : "None");
    console.log("Next Element:", nextElement ? nextElement.textContent : "None");
    // 使用 parentNode 和 childNodes
    let parentElement = currentElement.parentNode;
    let childNodes = parentElement.childNodes;
    previousElement = null;
    nextElement = null;
    for (let i = 0; i < childNodes.length; i++) {
      if (childNodes[i] === currentElement) {
        if (i > 0) {
          previousElement = childNodes[i - 1];
        }
        if (i < childNodes.length - 1) {
          nextElement = childNodes[i + 1];
        }
        break;
      }
    }
    console.log("Previous Element (childNodes):", previousElement ? previousElement.textContent : "None");
    console.log("Next Element (childNodes):", nextElement ? nextElement.textContent : "None");
    // 结合使用 querySelectorAll
    let elements = document.querySelectorAll(".item");
    let index = Array.prototype.findIndex.call(elements, function(el) {
      return el === currentElement;
    });
    previousElement = index > 0 ? elements[index - 1] : null;
    nextElement = index < elements.length - 1 ? elements[index + 1] : null;
    console.log("Previous Element (querySelectorAll):", previousElement ? previousElement.textContent : "None");
    console.log("Next Element (querySelectorAll):", nextElement ? nextElement.textContent : "None");
  </script>
</body>
</html>

六、总结

通过使用 previousElementSibling 和 nextElementSibling，你可以轻松地选择当前节点的前后兄弟节点。此外，通过使用 parentNode 和 childNodes，你可以遍历所有兄弟节点来找到前后节点。在某些情况下，你可能需要结合使用 querySelectorAll 来选择特定类型的前后节点。无论哪种方法，都能帮助你实现对前后节点的选择和操作。