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

星降

发布时间：2025-08-12 11:44:01

859人浏览过

来源于php中文网

原创

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

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

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

nextElementSibling

和

previousElementSibling

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

parentNode

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

children

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

解决方案

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

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

nextElementSibling

和
previousElementSibling

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

// 假设有一个HTML结构：
// 
//   第一个段落

							
								
								
									Is This Image NSFW?
									图片安全检测，AI分析图像是否适合安全工作
								
								下载 
							
						
//   目标元素
//   第三个div
//   
//   链接
// 

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

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

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

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

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

nextSibling

和
previousSibling

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

// 基于上面的HTML结构，注意HTML源码中标签之间的换行和空格会生成文本节点
// 第一个段落
//   目标元素  <-- 这里有一个换行和空格
//   第三个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); // 输出：[第一个段落
, 第三个div
, 链接]
}

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

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

children

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

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

找到元素的父节点：每个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);
// 结果会是：[第一个段落
, 第三个div
, 链接]

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

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元素。这在调试时会让人摸不着头脑，因为它不是一个可见的元素。
```
Box 1

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

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

nextElementSibling

和

previousElementSibling

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

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

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

空值检查（Null Checks）：这是最基本也最容易被忽视的一点。当一个元素是其父元素的第一个子元素时，

previousElementSibling

会返回

null

；同理，当它是最后一个子元素时，

nextElementSibling

也会返回

null

。如果你不进行空值检查，直接对

null

调用方法或访问属性，就会导致运行时错误。

const firstElement = document.querySelector('#parent p');
const nextEl = firstElement.nextElementSibling; // 正常返回 
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

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

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