如何获取元素的兄弟节点？

在前端开发中，获取元素的兄弟节点可以通过JavaScript的DOM API来实现。以下是一些示例：

获取下一个兄弟节点

你可以使用 nextSibling 属性来获取元素的下一个兄弟节点。但请注意，nextSibling 会返回下一个兄弟节点，无论它是元素节点还是文本节点（例如，空格或换行符）。如果你只关心元素节点，可以使用 nextElementSibling。

var element = document.getElementById('myElement');
var nextSibling = element.nextSibling; // 可能是文本节点或元素节点
var nextElementSibling = element.nextElementSibling; // 一定是元素节点，或者null

获取上一个兄弟节点

类似地，你可以使用 previousSibling 属性来获取元素的上一个兄弟节点。同样，previousSibling 会返回上一个兄弟节点，无论它是元素节点还是文本节点。如果你只关心元素节点，可以使用 previousElementSibling。

var element = document.getElementById('myElement');
var previousSibling = element.previousSibling; // 可能是文本节点或元素节点
var previousElementSibling = element.previousElementSibling; // 一定是元素节点，或者null

获取所有兄弟节点

如果你想获取一个元素的所有兄弟节点，你可以使用一个循环来遍历它们。以下是一个示例函数，它接受一个元素作为参数，并返回一个包含该元素所有兄弟元素节点的数组：

function getSiblings(element) {
    var siblings = []; // 创建一个空数组来存储兄弟节点
    var currentSibling = element.previousElementSibling; // 从上一个兄弟节点开始遍历
    while (currentSibling) {
        siblings.unshift(currentSibling); // 将每个兄弟节点添加到数组的开头
        currentSibling = currentSibling.previousElementSibling; // 移动到下一个兄弟节点
    }
    currentSibling = element.nextElementSibling; // 从下一个兄弟节点开始遍历
    while (currentSibling) {
        siblings.push(currentSibling); // 将每个兄弟节点添加到数组的末尾
        currentSibling = currentSibling.nextElementSibling; // 移动到下一个兄弟节点
    }
    return siblings; // 返回包含所有兄弟节点的数组
}

你可以这样使用这个函数：

var element = document.getElementById('myElement');
var siblings = getSiblings(element); // 获取所有兄弟节点
siblings.forEach(function(sibling) {
    console.log(sibling); // 在控制台中打印每个兄弟节点
});