JS获取兄弟节点的常见方法有哪些

在JavaScript中，获取兄弟节点是DOM操作的常见需求。本文详细介绍了JS获取兄弟节点的几种实用方法，包括利用`nextElementSibling`和`previousElementSibling`属性快速定位相邻元素节点，以及使用`nextSibling`和`previousSibling`获取所有类型的相邻节点（包括文本和注释节点）。针对需要获取所有兄弟元素节点（不含自身）的场景，推荐使用父节点的`children`属性结合`filter()`方法进行过滤，该方法兼容性好，逻辑清晰。此外，文章还深入探讨了`nextSibling`可能返回`#text`节点的原因，并强调了在实际项目中需要注意的潜在问题，如空值检查、动态DOM变化、HTML结构中的空白字符以及跨浏览器兼容性，助你编写更健壮的JS代码，精准高效地操作DOM元素。

获取所有兄弟元素节点（不含自身）的最常用方法是通过父节点的children属性结合过滤操作，具体步骤为：1. 获取目标元素的父节点（parentNode）；2. 通过父节点的children属性获取所有子元素集合（HTMLCollection）；3. 使用Array.from()将集合转换为数组，并用filter()方法排除目标元素本身。该方法能准确返回所有同级兄弟元素，不受文本节点或注释节点干扰，且逻辑清晰、兼容性好，适用于绝大多数场景。例如使用函数封装：function getAllSiblings(element) { return element && element.parentNode ? Array.from(element.parentNode.children).filter(child => child !== element) : []; }，调用后即可获得不含自身的兄弟元素数组，完整解决了动态获取兄弟节点的需求。

JavaScript获取元素的兄弟节点，最直接的方式是利用其自身的属性，如nextElementSibling和previousElementSibling，它们能分别拿到紧邻的下一个或上一个元素节点。如果需要获取所有兄弟节点，则通常会先通过parentNode拿到父元素，再从父元素的children集合中筛选。理解这些属性的细微差别，比如它们对文本节点和注释节点的处理方式，能帮助你更精准地操作DOM。

解决方案

要获取一个DOM元素的兄弟节点，我们有几种常用的方法，每种都有其适用场景。

1. 获取紧邻的下一个/上一个元素节点：nextElementSibling 和 previousElementSibling

这是我个人在日常开发中最常使用的，因为它只关心“元素”节点，非常符合我们通常操作DOM的意图。

// 假设有一个HTML结构：
// <div id="parent">
//   <p>第一个段落</p>
//   <span id="target">目标元素</span>
//   <div>第三个div</div>
//   <!-- 这是一个注释 -->
//   <a href="#">链接</a>
// </div>

const targetElement = document.getElementById('target');

// 获取紧邻的下一个兄弟元素
const nextSiblingElement = targetElement.nextElementSibling;
console.log(nextSiblingElement); // 输出：<div>第三个div</div>

// 获取紧邻的上一个兄弟元素
const previousSiblingElement = targetElement.previousElementSibling;
console.log(previousSiblingElement); // 输出：<p>第一个段落</p>

// 如果没有下一个/上一个元素，它们会返回 null
const firstP = document.querySelector('#parent p');
console.log(firstP.previousElementSibling); // 输出：null

2. 获取所有类型的紧邻兄弟节点：nextSibling 和 previousSibling

这两个属性会返回任何类型的节点，包括元素节点、文本节点（比如HTML标签之间的换行符或空格）和注释节点。这在某些特定场景下有用，但如果只是想操作可见的DOM元素，它们可能会带来一些意想不到的“惊喜”。

// 基于上面的HTML结构，注意HTML源码中标签之间的换行和空格会生成文本节点
// <p>第一个段落</p>
//   <span id="target">目标元素</span>  <-- 这里有一个换行和空格
//   <div>第三个div</div>

const targetElement = document.getElementById('target');

// 获取紧邻的下一个兄弟节点（可能是文本节点）
const nextSiblingNode = targetElement.nextSibling;
console.log(nextSiblingNode); // 可能会输出一个 Text 节点，代表换行或空格

// 获取紧邻的上一个兄弟节点（也可能是文本节点）
const previousSiblingNode = targetElement.previousSibling;
console.log(previousSiblingNode); // 可能会输出一个 Text 节点

3. 获取所有兄弟元素节点（不包括自身）：结合 parentNode.children

如果我需要拿到某个元素的所有兄弟元素，而不仅仅是紧邻的那个，我通常会这样做：

const targetElement = document.getElementById('target');
const parent = targetElement.parentNode;

if (parent) {
    // parent.children 返回的是一个 HTMLCollection，不是真正的数组，
    // 所以我通常会把它转换成数组，方便使用数组方法
    const allSiblings = Array.from(parent.children).filter(child => child !== targetElement);
    console.log(allSiblings); // 输出：[<p>第一个段落</p>, <div>第三个div</div>, <a href="#">链接</a>]
}

获取所有兄弟节点（不包括自身）有什么常用方法？

要获取一个元素的所有兄弟节点，并且排除掉它自己，最常见且可靠的方法是利用其父元素的children属性，然后进行过滤。我个人觉得这种方式思路最清晰，也最不容易出错。

具体来说，你可以这样做：

1. 找到元素的父节点：每个DOM元素都有一个parentNode属性，指向它的直接父级。这是获取所有兄弟节点的基础。
2. 获取父节点的所有子元素：父节点的children属性会返回一个HTMLCollection，包含了它所有的子“元素”节点。注意，这里是children，而不是childNodes，childNodes会包含文本节点和注释节点，通常不是我们想要的。
3. 遍历并过滤：将HTMLCollection转换成一个真正的数组（例如使用Array.from()），然后使用filter()方法，排除掉当前元素自身。

function getAllSiblings(element) {
    if (!element || !element.parentNode) {
        return []; // 如果元素不存在或没有父节点，就返回空数组
    }
    const parent = element.parentNode;
    // 使用 Array.from 将 HTMLCollection 转换为数组，方便使用 filter
    return Array.from(parent.children).filter(child => child !== element);
}

// 示例用法：
const targetElement = document.getElementById('target');
const siblings = getAllSiblings(targetElement);
console.log("所有兄弟节点（不含自身）：", siblings);
// 结果会是：[<p>第一个段落</p>, <div>第三个div</div>, <a href="#">链接</a>]

这种方法的好处在于，它提供了一个完整的兄弟元素列表，无论目标元素是第一个、最后一个还是中间的，都能准确获取到所有其他同级元素。这比反复调用nextElementSibling或previousElementSibling要方便得多，尤其是在你需要对所有兄弟元素进行统一操作时。

为什么有时nextSibling会返回#text节点，而nextElementSibling不会？

这是一个非常经典的“坑”，也是初学者常常会感到困惑的地方。核心原因在于DOM（文档对象模型）对“节点”和“元素”的定义是不同的。

• Node (节点)：DOM树中的所有东西都是节点。这包括了：
  • 元素节点 (Element nodes)：比如
    ,

    , 等HTML标签。

  • 文本节点 (Text nodes)：HTML标签内部的文字内容，甚至标签之间的空格、换行符都会被解析为文本节点。
  • 注释节点 (Comment nodes)：。
  • 文档节点 (Document node)：整个HTML文档的根节点。
  • 等等...
• Element (元素)：特指HTML标签所代表的节点。它是Node的一种具体类型。

现在我们来看nextSibling和nextElementSibling的区别：

• nextSibling：这个属性是基于所有类型的节点来查找下一个兄弟的。如果你HTML代码中，两个元素标签之间有换行符或者空格，那么这些换行符和空格就会被解析成一个文本节点。因此，nextSibling很可能就返回了这个文本节点，而不是你视觉上看到的下一个HTML元素。这在调试时会让人摸不着头脑，因为它不是一个可见的元素。

  <!-- HTML 结构 -->
  <div id="box1">Box 1</div>
  <!-- 这里有一个换行符和几个空格 -->
  <div id="box2">Box 2</div>

  const box1 = document.getElementById('box1');
  console.log(box1.nextSibling); // 可能会输出 #text 节点，内容是换行和空格

• nextElementSibling：这个属性则只关注元素节点。它会跳过任何文本节点、注释节点或其他非元素节点，直接找到下一个元素类型的兄弟节点。这在绝大多数前端开发场景下，正是我们想要的，因为它能更直观地对应到我们所看到的HTML结构。

  const box1 = document.getElementById('box1');
  console.log(box1.nextElementSibling); // 输出：<div id="box2">Box 2</div>

所以，我个人习惯是，如果我明确知道我只想操作HTML元素，那么nextElementSibling和previousElementSibling是我的首选。它们能有效避免因为HTML源码中的格式（比如换行和缩进）而引入的文本节点干扰，让代码更健壮、更符合直觉。

在实际项目中，获取兄弟节点时需要注意哪些潜在问题？

在实际项目中处理DOM，尤其是获取兄弟节点时，确实有一些需要留心的地方，避免一些意料之外的“坑”。

1. 空值检查（Null Checks）： 这是最基本也最容易被忽视的一点。当一个元素是其父元素的第一个子元素时，previousElementSibling会返回null；同理，当它是最后一个子元素时，nextElementSibling也会返回null。如果你不进行空值检查，直接对null调用方法或访问属性，就会导致运行时错误。

   const firstElement = document.querySelector('#parent p');
   const nextEl = firstElement.nextElementSibling; // 正常返回 <span>
   const prevEl = firstElement.previousElementSibling; // 返回 null
   
   // 错误示范：
   // console.log(prevEl.textContent); // 报错：Cannot read properties of null (reading 'textContent')
   
   // 正确做法：
   if (prevEl) {
       console.log(prevEl.textContent);
   } else {
       console.log("没有上一个兄弟元素。");
   }

   养成随手进行if (element)或element?.property（可选链操作符）检查的好习惯，能避免很多低级错误。

2. 动态DOM的变化： 在单页应用（SPA）或大量使用JavaScript操作DOM的场景中，页面的结构是动态变化的。如果你获取了一个元素的兄弟节点，然后DOM结构发生了变化（比如某个兄弟节点被移除、新增，或者元素本身被移动了位置），你之前缓存的兄弟节点引用可能就不再准确了。 我的建议是，如果DOM结构可能会频繁变动，尽量在需要时才去查询DOM，或者确保你的逻辑能正确处理DOM变化后的引用更新。避免长时间持有旧的DOM节点引用。

3. 性能考量（通常不是大问题）： 虽然DOM操作相对CPU密集，但在现代浏览器中，获取兄弟节点通常性能消耗很小。不过，如果你在一个非常大的循环中，对成千上万个元素频繁地执行Array.from(parentNode.children).filter(...)这样的操作，理论上可能会有微小的性能影响。但在绝大多数日常应用中，这并不是一个需要优先考虑的性能瓶颈。更常见的性能问题是频繁地触发DOM重绘和回流。

4. HTML结构中的空白字符： 前面提过，HTML标签之间的换行、空格会被解析成文本节点。这会影响nextSibling和previousSibling的行为。如果你的代码依赖这些属性，并且HTML格式不统一，可能会导致不稳定的行为。这就是为什么我更倾向于使用*ElementSibling系列属性的原因，它们能帮你避开这个“陷阱”。

5. 跨浏览器兼容性： 虽然现代浏览器对nextElementSibling和previousElementSibling的支持已经非常普遍且稳定，但在一些非常老的浏览器版本中（比如IE8及更早），可能需要使用nextSibling并手动检查nodeType来模拟。但现在这种情况已经很少见了，通常可以放心地使用*ElementSibling。

总的来说，在获取兄弟节点时，保持对null值的警惕、理解节点类型（元素 vs. 所有节点）的区别，并考虑DOM的动态性，就能写出更健壮、更可靠的代码。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS获取兄弟节点的常见方法有哪些》文章吧，也可关注golang学习网公众号了解相关技术文章。