正文

揭秘原生JS轻松获取全部兄弟节点的方法，告别繁琐，轻松驾驭DOM操作！

/0 浏览量
0329

在JavaScript中，DOM操作是开发者日常工作中必不可少的一部分。其中，获取元素的所有兄弟节点是一个常见的操作。传统的获取方法往往较为繁琐，但通过一些原生JS技巧，我们可以轻松实现这一目标。

一、问题背景

在HTML文档中，每个元素都可能拥有多个兄弟节点，如子元素之间的元素、父元素与子元素之间的关系等。获取这些兄弟节点对于进行某些DOM操作，如遍历或修改兄弟节点的样式等，具有重要意义。

二、传统方法

在传统的JavaScript中，获取兄弟节点的主要方法是使用parentNode和children属性。以下是一个简单的示例：

// 假设有一个HTML结构如下：
// <div id="parent">
//   <div id="child1"></div>
//   <div id="child2"></div>
// </div>

// 获取child1的兄弟节点
var child1 = document.getElementById('child1');
var siblings = child1.parentNode.children;
var child1Siblings = [];
for (var i = 0; i < siblings.length; i++) {
  if (siblings[i] !== child1) {
    child1Siblings.push(siblings[i]);
  }
}
console.log(child1Siblings); // 输出：[div#child2]

虽然这种方法可以完成任务，但代码较为冗长，且难以维护。

三、原生JS技巧

为了简化获取兄弟节点的方法，我们可以使用以下原生JS技巧：

1. 使用previousElementSibling和nextElementSibling

这两个属性可以直接获取到当前元素的前一个和后一个兄弟元素。以下是一个示例：

// 获取child1的前一个兄弟节点
var child1PrevSibling = child1.previousElementSibling;
console.log(child1PrevSibling); // 输出：null，因为child1没有前一个兄弟节点

// 获取child1的后一个兄弟节点
var child1NextSibling = child1.nextElementSibling;
console.log(child1NextSibling); // 输出：div#child2

2. 使用querySelectorAll

通过querySelectorAll方法，我们可以获取到当前元素的所有兄弟节点。以下是一个示例：

// 获取child1的所有兄弟节点
var child1Siblings = document.querySelectorAll('#parent > div:not(#child1)');
console.log(child1Siblings); // 输出：[div#child2]

3. 使用children属性与filter方法

结合children属性和Array.prototype.filter方法，我们可以实现对特定兄弟节点的筛选。以下是一个示例：

// 获取child1的所有兄弟节点，排除自身的兄弟节点
var child1Siblings = Array.from(child1.parentNode.children).filter(function (sibling) {
  return sibling !== child1;
});
console.log(child1Siblings); // 输出：[div#child2]

四、总结

通过以上方法，我们可以轻松获取到JavaScript中元素的兄弟节点，告别繁琐的代码。在实际开发中，根据具体需求选择合适的方法，将有助于提高代码的效率和可维护性。

-- 展开阅读全文 --