JavaScript DOM：选择兄弟节点

摘要：在本教程中，您将学习如何选择元素的下一个兄弟节点、上一个兄弟节点和所有兄弟节点。

假设您有以下项目列表

<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>Code language: HTML, XML (xml)

获取下一个兄弟节点

要获取元素的下一个兄弟节点，请使用nextElementSibling属性

let nextSibling = currentNode.nextElementSibling;Code language: JavaScript (javascript)

如果指定元素是列表中的最后一个元素，则nextElementSibling返回null。

以下示例使用nextElementSibling属性来获取具有current类的列表项的下一个兄弟节点

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

console.log(nextSibling);Code language: JavaScript (javascript)

输出

<li>Careers</li>Code language: HTML, XML (xml)

在这个例子中

首先，使用querySelector()选择类为current的列表项。
其次，使用nextElementSibling属性获取该列表项的下一个兄弟节点。

要获取元素的所有下一个兄弟节点，您可以使用以下代码

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

while(nextSibling) {
    console.log(nextSibling);
    nextSibling = nextSibling.nextElementSibling;
}Code language: JavaScript (javascript)

获取上一个兄弟节点

要获取元素的上一个兄弟节点，请使用previousElementSibling属性

let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;Code language: JavaScript (javascript)

如果当前元素是列表中的第一个元素，则previousElementSibling属性返回null。

以下示例使用previousElementSibling属性来获取具有current类的列表项的上一个兄弟节点

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

console.log(prevSiblings);Code language: JavaScript (javascript)

以下示例选择具有current类的列表项的所有上一个兄弟节点

let current = document.querySelector('.current');
let prevSibling = current.previousElementSibling;
while(prevSibling) {
    console.log(prevSibling);
    prevSibling = current.previousElementSibling;
}
Code language: JavaScript (javascript)

获取元素的所有兄弟节点

要获取元素的所有兄弟节点，我们将使用以下逻辑

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

以下函数说明了这些步骤

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;
};
Code language: JavaScript (javascript)

整合所有内容

<!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>
Code language: HTML, XML (xml)

输出

["Home", "Products", "Careers", "Investors", "News", "About Us"]
Code language: JSON / JSON with Comments (json)

摘要

nextElementSibling返回元素的下一个兄弟节点，如果元素是列表中的最后一个元素，则返回null。
previousElementSibling返回元素的上一个兄弟节点，如果元素是列表中的第一个元素，则返回null。
要获取元素的所有兄弟节点，您可以使用利用nextElementSibling属性的辅助函数。

测验

本教程是否有帮助？