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

nextElementSibling

previousElementSibling

parentNode

children

解决方案

nextElementSibling

previousElementSibling

// 假设有一个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

nextSibling

previousSibling

// 基于上面的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 节点

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

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

不会？

• Node

  登录后复制

  登录后复制
  (节点)：DOM树中的所有东西都是节点。这包括了：
  • 元素节点 (Element nodes)：比如

    <div>

    登录后复制
    ,

    <p>

    登录后复制
    ,

    <span>

    登录后复制
    等HTML标签。
  • 文本节点 (Text nodes)：HTML标签内部的文字内容，甚至标签之间的空格、换行符都会被解析为文本节点。
  • 注释节点 (Comment nodes)：

    <!-- 这是一个注释 -->

    登录后复制
    。
  • 文档节点 (Document node)：整个HTML文档的根节点。
  • 等等...

• Element

  登录后复制
  (元素)：特指HTML标签所代表的节点。它是

  Node

  登录后复制

  登录后复制
  的一种具体类型。

nextSibling

nextElementSibling

• <p>

  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 节点，内容是换行和空格

  登录后复制
• <p>

  nextElementSibling

  登录后复制

  登录后复制

  登录后复制

  登录后复制

  登录后复制

  登录后复制

  登录后复制

  登录后复制

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

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

  登录后复制

nextElementSibling

previousElementSibling

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

1. <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

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

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

3. <p>性能考量（通常不是大问题）： 虽然DOM操作相对CPU密集，但在现代浏览器中，获取兄弟节点通常性能消耗很小。不过，如果你在一个非常大的循环中，对成千上万个元素频繁地执行

   Array.from(parentNode.children).filter(...)

   登录后复制
   这样的操作，理论上可能会有微小的性能影响。但在绝大多数日常应用中，这并不是一个需要优先考虑的性能瓶颈。更常见的性能问题是频繁地触发DOM重绘和回流。

4. <p>HTML结构中的空白字符： 前面提过，HTML标签之间的换行、空格会被解析成文本节点。这会影响

   nextSibling

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   和

   previousSibling

   登录后复制

   登录后复制
   的行为。如果你的代码依赖这些属性，并且HTML格式不统一，可能会导致不稳定的行为。这就是为什么我更倾向于使用

   *ElementSibling

   登录后复制

   登录后复制
   系列属性的原因，它们能帮你避开这个“陷阱”。

5. <p>跨浏览器兼容性： 虽然现代浏览器对

   nextElementSibling

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   和

   previousElementSibling

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   的支持已经非常普遍且稳定，但在一些非常老的浏览器版本中（比如IE8及更早），可能需要使用

   nextSibling

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   并手动检查

   nodeType

   登录后复制
   来模拟。但现在这种情况已经很少见了，通常可以放心地使用

   *ElementSibling

   登录后复制

   登录后复制
   。

null

以上就是js怎么获取元素的兄弟节点的详细内容，更多请关注php中文网其它相关文章！