文章导读

js怎么获取元素的兄弟节点

站长 2025年8月12日 8

<p>获取所有兄弟元素节点（不含自身）的最常用方法是通过父节点的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) : []; }，调用后即可获得不含自身的兄弟元素数组，完整解决了动态获取兄弟节点的需求。

<p>

<p>JavaScript获取元素的兄弟节点，最直接的方式是利用其自身的属性，如

nextElementSibling

和

previousElementSibling

，它们能分别拿到紧邻的下一个或上一个元素节点。如果需要获取所有兄弟节点，则通常会先通过

parentNode

拿到父元素，再从父元素的

children

集合中筛选。理解这些属性的细微差别，比如它们对文本节点和注释节点的处理方式，能帮助你更精准地操作DOM。

解决方案

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

<p>1. 获取紧邻的下一个/上一个元素节点：

nextElementSibling

和

previousElementSibling

<p>这是我个人在日常开发中最常使用的，因为它只关心“元素”节点，非常符合我们通常操作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

<p>2. 获取所有类型的紧邻兄弟节点：

nextSibling

和

previousSibling

<p>这两个属性会返回任何类型的节点，包括元素节点、文本节点（比如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 节点

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

parentNode.children

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

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>] }

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

<p>要获取一个元素的所有兄弟节点，并且排除掉它自己，最常见且可靠的方法是利用其父元素的

children

属性，然后进行过滤。我个人觉得这种方式思路最清晰，也最不容易出错。

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

找到元素的父节点：每个DOM元素都有一个
```
parentNode
```
属性，指向它的直接父级。这是获取所有兄弟节点的基础。
获取父节点的所有子元素：父节点的
children
属性会返回一个
```
HTMLCollection
```
，包含了它所有的子“元素”节点。注意，这里是
children
，而不是
```
childNodes
```
，
```
childNodes
```
会包含文本节点和注释节点，通常不是我们想要的。
遍历并过滤：将
```
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>]

<p>这种方法的好处在于，它提供了一个完整的兄弟元素列表，无论目标元素是第一个、最后一个还是中间的，都能准确获取到所有其他同级元素。这比反复调用

nextElementSibling

或

previousElementSibling

要方便得多，尤其是在你需要对所有兄弟元素进行统一操作时。

为什么有时

nextSibling

会返回

#text

节点，而

nextElementSibling

不会？

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

Node

(节点)：DOM树中的所有东西都是节点。这包括了：
- 元素节点 (Element nodes)：比如
```
<div>
```
  ,
```
<p>
```
  ,
```
<span>
```
  等HTML标签。
- 文本节点 (Text nodes)：HTML标签内部的文字内容，甚至标签之间的空格、换行符都会被解析为文本节点。
- 注释节点 (Comment nodes)：
```

```
  。
- 文档节点 (Document node)：整个HTML文档的根节点。
- 等等…
Element

(元素)：特指HTML标签所代表的节点。它是
```
Node
```
的一种具体类型。

<p>现在我们来看

nextSibling

和

nextElementSibling

的区别：

<p>

nextSibling

：这个属性是基于所有类型的节点来查找下一个兄弟的。如果你HTML代码中，两个元素标签之间有换行符或者空格，那么这些换行符和空格就会被解析成一个文本节点。因此，
nextSibling
很可能就返回了这个文本节点，而不是你视觉上看到的下一个HTML元素。这在调试时会让人摸不着头脑，因为它不是一个可见的元素。
```
 <div id="box1">Box 1</div>  <div id="box2">Box 2</div>
```
```
const box1 = document.getElementById('box1'); console.log(box1.nextSibling); // 可能会输出 #text 节点，内容是换行和空格
```
<p>

nextElementSibling

：这个属性则只关注元素节点。它会跳过任何文本节点、注释节点或其他非元素节点，直接找到下一个元素类型的兄弟节点。这在绝大多数前端开发场景下，正是我们想要的，因为它能更直观地对应到我们所看到的HTML结构。
```
const box1 = document.getElementById('box1'); console.log(box1.nextElementSibling); // 输出：<div id="box2">Box 2</div>
```

<p>所以，我个人习惯是，如果我明确知道我只想操作HTML元素，那么

nextElementSibling

和

previousElementSibling

是我的首选。它们能有效避免因为HTML源码中的格式（比如换行和缩进）而引入的文本节点干扰，让代码更健壮、更符合直觉。

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

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

<p>空值检查（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("没有上一个兄弟元素。"); }

<p>养成随手进行

if (element)

或

element?.property

（可选链操作符）检查的好习惯，能避免很多低级错误。

<p>动态DOM的变化：在单页应用（SPA）或大量使用JavaScript操作DOM的场景中，页面的结构是动态变化的。如果你获取了一个元素的兄弟节点，然后DOM结构发生了变化（比如某个兄弟节点被移除、新增，或者元素本身被移动了位置），你之前缓存的兄弟节点引用可能就不再准确了。我的建议是，如果DOM结构可能会频繁变动，尽量在需要时才去查询DOM，或者确保你的逻辑能正确处理DOM变化后的引用更新。避免长时间持有旧的DOM节点引用。
<p>性能考量（通常不是大问题）：虽然DOM操作相对CPU密集，但在现代浏览器中，获取兄弟节点通常性能消耗很小。不过，如果你在一个非常大的循环中，对成千上万个元素频繁地执行
```
Array.from(parentNode.children).filter(...)
```
这样的操作，理论上可能会有微小的性能影响。但在绝大多数日常应用中，这并不是一个需要优先考虑的性能瓶颈。更常见的性能问题是频繁地触发DOM重绘和回流。
<p>HTML结构中的空白字符：前面提过，HTML标签之间的换行、空格会被解析成文本节点。这会影响
nextSibling
和
```
previousSibling
```
的行为。如果你的代码依赖这些属性，并且HTML格式不统一，可能会导致不稳定的行为。这就是为什么我更倾向于使用
```
*ElementSibling
```
系列属性的原因，它们能帮你避开这个“陷阱”。
<p>跨浏览器兼容性：虽然现代浏览器对
nextElementSibling
和
previousElementSibling
的支持已经非常普遍且稳定，但在一些非常老的浏览器版本中（比如IE8及更早），可能需要使用
nextSibling
并手动检查
```
nodeType
```
来模拟。但现在这种情况已经很少见了，通常可以放心地使用
```
*ElementSibling
```
。

<p>总的来说，在获取兄弟节点时，保持对

null

值的警惕、理解节点类型（元素 vs. 所有节点）的区别，并考虑DOM的动态性，就能写出更健壮、更可靠的代码。

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！

js怎么获取元素的兄弟节点

解决方案

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

为什么有时

nextSibling

会返回

#text

节点，而

nextElementSibling

不会？

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

评论（已关闭）

搜索

标签云

书签