js 获取上一个兄弟节点|极客笔记

js 获取上一个兄弟节点

在前端开发中，经常会遇到需要获取元素的上一个兄弟节点的情况。JavaScript提供了几种方法来实现这个目的，本文将详细介绍这些方法，并给出相应的示例代码。

方法一：使用previousSibling属性

JavaScript中的DOM节点有一个previousSibling属性，可以获取当前节点的前一个兄弟节点。但需要注意的是，该属性获取到的可能是一个文本节点，而不一定是我们期望的元素节点。因此，为了准确获取上一个兄弟节点，我们需要结合nodeType属性进行判断。

// 获取上一个兄弟节点
function getPreviousSibling(element) {
    var previousSibling = element.previousSibling;
    while(previousSibling && previousSibling.nodeType !== 1) {
        previousSibling = previousSibling.previousSibling;
    }
    return previousSibling;
}

// 示例代码
var currentElement = document.getElementById('currentElement');
var previousSibling = getPreviousSibling(currentElement);
console.log(previousSibling);

在上面的示例代码中，我们首先获取当前元素currentElement，然后通过getPreviousSibling函数获取该元素的上一个兄弟节点，并将其打印输出。如果currentElement的上一个兄弟节点存在且是元素节点，则会在控制台输出该节点；否则输出null。

方法二：使用previousElementSibling属性

除了previousSibling属性外，JavaScript还提供了previousElementSibling属性，该属性只会返回元素节点，跳过文本节点。因此，我们可以直接使用这个属性获取当前节点的上一个兄弟元素节点。

// 获取上一个兄弟节点
function getPreviousElementSibling(element) {
    return element.previousElementSibling;
}

// 示例代码
var currentElement = document.getElementById('currentElement');
var previousElementSibling = getPreviousElementSibling(currentElement);
console.log(previousElementSibling);

上面的示例代码中，我们同样是获取当前元素currentElement，然后直接通过getPreviousElementSibling函数获取该元素的上一个兄弟元素节点，并将其打印输出。

方法三：使用jQuery方法

如果项目中引入了jQuery库，我们还可以使用jQuery提供的方法来获取上一个兄弟节点。jQuery提供的prev()方法和prevAll()方法可以实现我们的需求。

// 使用jQuery获取上一个兄弟节点
var previousSibling =  $('#currentElement').prev(); console.log(previousSibling); // 使用jQuery获取所有上面的兄弟节点 var previousSiblings =$ ('#currentElement').prevAll();
console.log(previousSiblings);

在上面的示例代码中，我们使用了jQuery选择器$('#currentElement')选中了当前元素，然后分别使用prev()方法和prevAll()方法获取当前元素的上一个兄弟元素节点以及所有上面的兄弟节点，并将它们打印输出。