JavaScript 选择兄弟元素

在本教程中，您将学习如何选择元素的下一个同级元素、上一个同级元素以及所有同级元素，也称为兄弟元素，还可以称为相邻元素。

假设您的 HTML 文档中包含以下由 ul 和 li 元素构建的列表：

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li>About Us</li>
</ul>

获取下一个兄弟元素

要获取元素的下一个同级兄弟元素，可以使用节点的 nextElementSibling 属性：

let nextSibling = currentNode.nextElementSibling;

如果当前节点是所有兄弟元素中的最后一个元素，则 nextElementSibling 属性是 null。

下面的示例使用 nextElementSibling 属性获取与类名 current 元素相邻的下一个同级元素：

let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

console.log(nextSibling);

输出：

<li>Careers</li>

在这个例子中：

首先，使用 document 的 querySelector 方法并指定类名 current 选择一个元素。
其次，使用已选择节点 nextElementSibling 属性获取下一个同级元素。

要获取某个元素的所有下一个同级元素，可以使用以下代码：

let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

while(nextSibling) {
    console.log(nextSibling);
    nextSibling = nextSibling.nextElementSibling;
}

获取上一个兄弟元素

要获取元素的前一个同级元素，可以使用元素节点的 previousElementSibling 属性：

let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;

如果当前元素是所有兄弟元素的第一个元素，则 previousElementSibling 属性返回是 null。

下面的示例使用 previousElementSibling 属性来获取与类名 current 相同的同级元素：

let current = document.querySelector('.current');
let prevSiblings = current.previousElementSibling;

console.log(prevSiblings);

下面示例选择与类名 current 同级并在之前的所有元素：

let current = document.querySelector('.current');
let prevSibling = current.previousElementSibling;
while(prevSibling) {
    console.log(prevSibling);
    prevSibling = current.previousElementSibling;
}

获取指定元素的所有兄弟元素

要获取元素的所有同级元素，我们将使用以下逻辑：

首先，选择要查找其同级元素的父元素。
其次，选择父元素的第一个子元素。
第三，将第一个元素添加到同级数组中。
第四，选择第一个元素的下一个同级元素。
最后，重复第3步和第4步，直到没有兄弟元素为止。如果下一个兄弟元素是父元素的第一个元素，请跳过第三步。

let getSiblings = function (e) {
    // 声明数组 siblings 存储所有兄弟元素
    let siblings = []; 
    // 如果没有父元素，直接返回空数组
    if(!e.parentNode) {
        return siblings;
    }
    // 父元素的地第一个子元素
    let sibling  = e.parentNode.firstChild;
    
    // 获取所有兄弟元素
    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling;
    }
    return siblings;
};

所有代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Siblings</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Products</li>
        <li class="current">Customer Support</li>
        <li>Careers</li>
        <li>Investors</li>
        <li>News</li>
        <li>About Us</li>
    </ul>
    
    <script>
        let getSiblings = function (e) {
            // for collecting siblings
            let siblings = []; 
            // if no parent, return no sibling
            if(!e.parentNode) {
                return siblings;
            }
            // first child of the parent node
            let sibling  = e.parentNode.firstChild;
            // collecting siblings
            while (sibling) {
                if (sibling.nodeType === 1 && sibling !== e) {
                    siblings.push(sibling);
                }
                sibling = sibling.nextSibling;
            }
            return siblings;
        };

        let siblings = getSiblings(document.querySelector('.current'));
        siblingText = siblings.map(e => e.innerHTML);
        console.log(siblingText);
    </script>
</body>
</html>

输出：

["Home", "Products", "Careers", "Investors", "News", "About Us"]

结论

nextElementSibling 返回指定元素的下一个同级元素，如果元素是所有兄弟元素最后一个元素则 nextElementSibling 属性是 null。

previousElementSibling 返回指定元素的上一个同级元素，如果元素是所有兄弟元素最前面的一个元素则 previousElementSibling 属性是 null。

要获取元素的所有同级元素，您可以使用 nextElementSibling 属性的辅助函数。