获取所有兄弟元素节点（不含自身）的最常用方法是通过父节点的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结构：// const targetElement = document.getElementById('target');// 获取紧邻的下一个兄弟元素const nextSiblingElement = targetElement.nextElementSibling;console.log(nextSiblingElement); // 输出：第三个div// 获取紧邻的上一个兄弟元素const previousSiblingElement = targetElement.previousElementSibling;console.log(previousSiblingElement); // 输出：第一个段落
// 如果没有下一个/上一个元素，它们会返回 nullconst firstP = document.querySelector('#parent p');console.log(firstP.previousElementSibling); // 输出：null
2. 获取所有类型的紧邻兄弟节点：
nextSibling
和
previousSibling
这两个属性会返回任何类型的节点，包括元素节点、文本节点（比如HTML标签之间的换行符或空格）和注释节点。这在某些特定场景下有用，但如果只是想操作可见的DOM元素，它们可能会带来一些意想不到的“惊喜”。
// 基于上面的HTML结构，注意HTML源码中标签之间的换行和空格会生成文本节点//第一个段落
// 目标元素 <-- 这里有一个换行和空格//第三个divconst 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
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 1Box 2const 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。
总的来说，在获取兄弟节点时，保持对
null值的警惕、理解节点类型（元素 vs. 所有节点）的区别，并考虑DOM的动态性，就能写出更健壮、更可靠的代码。
以上就是js怎么获取元素的兄弟节点的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514558.html
微信扫一扫
支付宝扫一扫
