js获取同级节点

在JavaScript中，获取同级节点（兄弟节点）有多种方法，以下是一些常用的方法和相关概念：

基本概念

• DOM（Document Object Model）：文档对象模型，是HTML和XML文档的编程接口。
• Node：DOM树中的一个节点，可以是元素节点、文本节点等。
• Sibling：兄弟节点，具有相同父节点的两个节点互为兄弟节点。

获取同级节点的方法

1. 使用nextSibling和previousSibling属性
   • nextSibling：返回当前节点的下一个兄弟节点。
   • previousSibling：返回当前节点的上一个兄弟节点。
   • previousSibling：返回当前节点的上一个兄弟节点。

• 使用nextElementSibling和previousElementSibling属性
  • nextElementSibling：返回当前元素的下一个兄弟元素节点。
  • previousElementSibling：返回当前元素的上一个兄弟元素节点。
  • previousElementSibling：返回当前元素的上一个兄弟元素节点。
• 使用parentNode和children属性
  • parentNode：返回当前节点的父节点。
  • children：返回当前节点的所有子元素节点的集合。
  • children：返回当前节点的所有子元素节点的集合。

应用场景

• 动态修改页面布局：通过操作兄弟节点，可以动态地添加、删除或修改页面元素。
• 事件委托：通过操作兄弟节点，可以实现事件委托，提高性能。
• 表单验证：通过操作兄弟节点，可以实现表单验证，提示用户输入错误。

常见问题及解决方法

1. 获取到的兄弟节点是文本节点而不是元素节点
   • 使用nextElementSibling和previousElementSibling属性可以避免这个问题。

• 获取不到兄弟节点
  • 确保当前节点有父节点，并且父节点有子节点。
  • 确保当前节点不是最后一个子节点，否则nextSibling和nextElementSibling会返回null。

示例代码

假设有以下HTML结构：

<div id="parent">
    <div id="sibling1">Sibling 1</div>
    <div id="target">Target</div>
    <div id="sibling2">Sibling 2</div>
</div>

获取#target元素的兄弟节点：

var target = document.getElementById('target');

// 获取下一个兄弟元素节点
var nextSibling = target.nextElementSibling;
console.log(nextSibling.id); // 输出 "sibling2"

// 获取上一个兄弟元素节点
var previousSibling = target.previousElementSibling;
console.log(previousSibling.id); // 输出 "sibling1"

// 获取所有兄弟元素节点
var siblings = Array.from(target.parentNode.children).filter(function(sibling) {
    return sibling !== target;
});
console.log(siblings.map(sibling => sibling.id)); // 输出 ["sibling1", "sibling2"]

通过以上方法和示例代码，你可以灵活地获取和操作DOM中的同级节点。