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番目と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 プロパティを利用するヘルパー関数を使用できます。

クイズ

このチュートリアルは役に立ちましたか？