资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

js中如何获取元素的兄弟节点

创作时间:

作者:

@小白创作中心

js中如何获取元素的兄弟节点

引用

来源

https://docs.pingcode.com/baike/2377128

在Web开发中，获取元素的兄弟节点是一个常见的需求，比如在表单验证中动态显示错误提示，或者在导航菜单中高亮当前选项。本文将详细介绍JavaScript中获取兄弟节点的各种方法，并通过实际案例帮助你掌握这些技巧。

在JavaScript中，获取元素的兄弟节点可以使用以下几种方法：nextSibling、previousSibling、nextElementSibling、previousElementSibling。其中，nextElementSibling和previousElementSibling是获取元素兄弟节点的常用方法，因为它们只会返回元素节点，忽略文本节点和注释节点。下面将详细介绍这些方法，并提供一些实际应用示例。

一、获取下一个兄弟节点

1、使用 nextSibling

nextSibling 属性返回当前节点之后的第一个兄弟节点，包括文本节点和注释节点。这意味着，如果下一个兄弟节点是一个文本节点或注释节点，它也会被返回。

let element = document.getElementById("myElement");
let nextSibling = element.nextSibling;

2、使用 nextElementSibling

nextElementSibling 属性返回当前节点之后的下一个兄弟元素节点，忽略文本节点和注释节点。这是更常用的方法，因为大多数情况下，我们只对元素节点感兴趣。

let element = document.getElementById("myElement");
let nextElementSibling = element.nextElementSibling;

示例：

<div id="container">
  <div id="myElement">Element 1</div>  
  <div>Element 2</div>  
  <div>Element 3</div>  
</div>  
<script>  
  let element = document.getElementById("myElement");  
  let nextElement = element.nextElementSibling;  
  console.log(nextElement);  // 输出: <div>Element 2</div>  
</script>

二、获取上一个兄弟节点

1、使用 previousSibling

previousSibling 属性返回当前节点之前的第一个兄弟节点，包括文本节点和注释节点。

let element = document.getElementById("myElement");
let previousSibling = element.previousSibling;

2、使用 previousElementSibling

previousElementSibling 属性返回当前节点之前的第一个兄弟元素节点，忽略文本节点和注释节点。这是更常用的方法，因为它只返回元素节点。

let element = document.getElementById("myElement");
let previousElementSibling = element.previousElementSibling;

示例：

<div id="container">
  <div>Element 1</div>  
  <div id="myElement">Element 2</div>  
  <div>Element 3</div>  
</div>  
<script>  
  let element = document.getElementById("myElement");  
  let previousElement = element.previousElementSibling;  
  console.log(previousElement);  // 输出: <div>Element 1</div>  
</script>

三、遍历所有兄弟节点

1、获取所有后续兄弟节点

使用 nextElementSibling 属性可以遍历所有后续兄弟节点。

let element = document.getElementById("myElement");
let siblings = [];
let sibling = element.nextElementSibling;
while (sibling) {
  siblings.push(sibling);
  sibling = sibling.nextElementSibling;
}
console.log(siblings);

2、获取所有前置兄弟节点

使用 previousElementSibling 属性可以遍历所有前置兄弟节点。

let element = document.getElementById("myElement");
let siblings = [];
let sibling = element.previousElementSibling;
while (sibling) {
  siblings.push(sibling);
  sibling = sibling.previousElementSibling;
}
console.log(siblings);

四、过滤特定兄弟节点

有时我们可能需要获取特定类型的兄弟节点，可以结合 Element.matches 方法进行过滤。

let element = document.getElementById("myElement");
let siblings = [];
let sibling = element.nextElementSibling;
while (sibling) {
  if (sibling.matches('.targetClass')) {
    siblings.push(sibling);
  }
  sibling = sibling.nextElementSibling;
}
console.log(siblings);

五、实用示例

1、在表单中进行动态验证

在表单中，我们可能需要根据当前输入框的值来动态显示或隐藏下一个兄弟节点，如错误提示信息。

<form>
  <input type="text" id="username" placeholder="Enter username">  
  <div id="error-message" style="display:none;">Username is required</div>  
  <button type="submit">Submit</button>  
</form>  
<script>  
  let usernameInput = document.getElementById("username");  
  let errorMessage = usernameInput.nextElementSibling;  
  usernameInput.addEventListener('input', function() {  
    if (usernameInput.value === '') {  
      errorMessage.style.display = 'block';  
    } else {  
      errorMessage.style.display = 'none';  
    }  
  });  
</script>

2、在导航菜单中高亮当前选项

在导航菜单中，我们可以根据用户点击的菜单项来高亮显示当前选项，并移除其他项的高亮样式。

<ul id="menu">
  <li class="menu-item">Home</li>  
  <li class="menu-item">About</li>  
  <li class="menu-item">Services</li>  
  <li class="menu-item">Contact</li>  
</ul>  
<script>  
  let menuItems = document.querySelectorAll('#menu .menu-item');  
  menuItems.forEach(function(item) {  
    item.addEventListener('click', function() {  
      menuItems.forEach(function(sibling) {  
        sibling.classList.remove('active');  
      });  
      item.classList.add('active');  
    });  
  });  
</script>

六、使用项目管理工具推荐

在项目团队管理中，如果需要管理不同项目的任务或进行团队协作，可以考虑使用专业的项目管理工具。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够帮助团队更有效地进行任务分配、进度跟踪和沟通协作。

1、PingCode

PingCode是一款专为研发团队设计的项目管理系统，具有灵活的需求管理、缺陷跟踪和迭代管理功能。它支持敏捷开发、Scrum和看板等多种项目管理方法，能够帮助团队更好地规划和管理项目进度。

2、Worktile

Worktile是一款通用项目协作软件，适用于各种类型的团队和项目管理需求。它提供任务管理、项目进度跟踪、文件共享和团队沟通等功能，帮助团队提高协作效率和项目透明度。

综上所述，在JavaScript中获取元素的兄弟节点可以使用nextSibling、previousSibling、nextElementSibling和previousElementSibling等方法。根据实际需求选择合适的方法，并结合项目管理工具PingCode和Worktile，能够更高效地进行项目管理和团队协作。