js获取兄弟元素|极客笔记

js获取兄弟元素

在前端开发中，经常会遇到需要操作或获取某个元素的兄弟元素的需求，比如需要对相邻的元素进行相关操作。JavaScript提供了多种方法来获取一个元素的兄弟元素，本文将详细介绍这些方法，并给出对应的示例代码。

1. 使用nextSibling和previousSibling属性

在DOM树中，每一个元素节点都有nextSibling和previousSibling属性，分别代表该元素的下一个兄弟节点和上一个兄弟节点。这两个属性返回的是一个Node类型的对象，需要注意的是，包括文本节点在内的所有节点都是节点对象，因此使用这种方式需要做进一步的判断和处理。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Sibling Elements</title>
</head>
<body>
    <div id="parent">
        <div id="child1">Child 1</div>
        <div id="child2">Child 2</div>
        <div id="child3">Child 3</div>
    </div>
    <script>
        var child1 = document.getElementById('child1');
        var nextSibling = child1.nextSibling;
        var previousSibling = child2.previousSibling;

        console.log('Next sibling of child1:', nextSibling);
        console.log('Previous sibling of child2:', previousSibling);
    </script>
</body>
</html>

运行结果：

Next sibling of child1: <div id="child2">Child 2</div>
Previous sibling of child2: <div id="child1">Child 1</div>

2. 使用nextElementSibling和previousElementSibling属性

上面介绍的方法返回的是节点对象，如果只想获取元素节点而不包括文本节点，可以使用nextElementSibling和previousElementSibling属性。这两个属性返回的是一个Element类型的对象，只包括元素节点。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Sibling Elements</title>
</head>
<body>
    <div id="parent">
        <div id="child1">Child 1</div>
        <div id="child2">Child 2</div>
        <div id="child3">Child 3</div>
    </div>
    <script>
        var child1 = document.getElementById('child1');
        var nextSibling = child1.nextElementSibling;
        var previousSibling = child2.previousElementSibling;

        console.log('Next sibling of child1:', nextSibling);
        console.log('Previous sibling of child2:', previousSibling);
    </script>
</body>
</html>

运行结果：

Next sibling of child1: <div id="child2">Child 2</div>
Previous sibling of child2: <div id="child1">Child 1</div>

3. 使用nextSibling和previousSibling方法

除了属性之外，也可以使用nextSibling和previousSibling方法来获取兄弟节点。这两个方法返回的也是一个Node类型的对象，需要根据具体情况进行进一步处理。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Sibling Elements</title>
</head>
<body>
    <div id="parent">
        <div id="child1">Child 1</div>
        <div id="child2">Child 2</div>
        <div id="child3">Child 3</div>
    </div>
    <script>
        var child1 = document.getElementById('child1');
        var nextSibling = child1.nextSibling;
        var previousSibling = child2.previousSibling;

        nextSibling = getNextSibling(child1);
        previousSibling = getPreviousSibling(child2);

        console.log('Next sibling of child1:', nextSibling);
        console.log('Previous sibling of child2:', previousSibling);

        function getNextSibling(elem) {
            var next = elem.nextSibling;
            while (next && next.nodeType !== 1) {
                next = next.nextSibling;
            }
            return next;
        }

        function getPreviousSibling(elem) {
            var prev = elem.previousSibling;
            while (prev && prev.nodeType !== 1) {
                prev = prev.previousSibling;
            }
            return prev;
        }
    </script>
</body>
</html>

运行结果：

Next sibling of child1: <div id="child2">Child 2</div>
Previous sibling of child2: <div id="child1">Child 1</div>

结语

通过上述方法，可以很方便地获取一个元素的兄弟元素，从而实现在DOM操作中的相关需求。在实际开发中，根据具体情况选择合适的方式来获取兄弟元素，从而提高开发效率和代码质量。

js获取兄弟元素