正文

JavaScript中获取节点所有兄弟节点的方法如下： 1. 使用`parentNode`和`children`属性结合循环遍历： ```javascript function getAllSiblings(element) { var siblings = []; var parent = element.parentNode; var children =

/0 浏览量
0716

在处理 DOM 操作时，获取一个节点的所有兄弟节点是一个常见的需求。JavaScript 提供了多种方法来实现这一功能。下面，我将详细介绍三种常用的方法，并辅以代码示例，帮助大家更好地理解和应用。

方法一：结合 parentNode 和 children 属性遍历

这种方法首先获取目标节点的父节点，然后遍历父节点下的所有子节点，将不是目标节点的子节点添加到兄弟节点数组中。

function getAllSiblings(element) {
  var siblings = [];
  var parent = element.parentNode;
  var children = parent.children;
  for (var i = 0; i < children.length; i++) {
    if (children[i] !== element) {
      siblings.push(children[i]);
    }
  }
  return siblings;
}

方法二：使用 nextElementSibling 和 previousElementSibling 属性

这种方法通过循环遍历目标节点的下一个兄弟节点和上一个兄弟节点，直到没有兄弟节点为止。

function getAllSiblings(element) {
  var siblings = [];
  var current = element;
  while (current) {
    current = current.nextElementSibling;
    if (current) {
      siblings.push(current);
    }
  }
  return siblings;
}

方法三：使用 previousElementSibling 属性反向遍历

与第二种方法类似，这种方法也是通过循环遍历兄弟节点，但它是从目标节点的上一个兄弟节点开始遍历，直到没有兄弟节点为止。

function getAllSiblings(element) {
  var siblings = [];
  var current = element;
  while (current) {
    current = current.previousElementSibling;
    if (current) {
      siblings.push(current);
    }
  }
  return siblings;
}

总结

这三种方法都可以获取到指定节点的所有兄弟节点。在实际应用中，你可以根据具体需求选择合适的方法。例如，如果你需要从目标节点的下一个兄弟节点开始遍历，那么第二种方法可能更适合你；如果你需要从目标节点的上一个兄弟节点开始遍历，那么第三种方法可能更合适。

希望这篇文章能帮助你更好地理解 JavaScript 中获取节点所有兄弟节点的方法。如果你有任何疑问，欢迎在评论区留言交流。

-- 展开阅读全文 --