3

JavaScript 选择兄弟元素

 8 months ago
source link: https://www.myfreax.com/javascript-siblings/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
dom

JavaScript 选择兄弟元素

元素的下一个同级元素、上一个同级元素以及所有同级元素，也称为兄弟元素，还可以称为相邻元素

Updated At 14 Dec 2023 4 min read
By myfreax
JavaScript 选择兄弟元素

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 属性的辅助函数。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK