要素の兄弟ノードを取得する

要素の次の兄弟ノードと前の兄弟ノードを取得するには、element.nextSiblingとelement.previousSiblingプロパティを使用します。

const previous = element.previousSibling;
const next = element.nextSibling;Code language: JavaScript (javascript)

次のヘルパー関数は、要素のすべての次の兄弟ノードを取得します。

const getNextSiblings = (e) => {
    let siblings = [];
    while (e = e.nextSibling) {
        siblings.push(e);
    }
    return siblings;
}Code language: JavaScript (javascript)

そして、次のヘルパー関数は、要素のすべての前の兄弟ノードを取得します。

const getPreviousSiblings = (e) => {
    let siblings = [];
    while (e = e.previousSibling) {
        siblings.push(e);
    }
    return siblings;
}Code language: JavaScript (javascript)

次のヘルパー関数は、要素のすべての兄弟ノードを取得します。

const getSiblings = (e) => {
    let siblings = [];

    e = e.parentNode.firstChild;
    do {
        siblings.push(e);
    } while (e = e.nextSibling);

    return siblings;
}Code language: JavaScript (javascript)

場合によっては、要素の兄弟ノードをフィルタリングしたいことがあります。たとえば、現在の要素のp要素であるすべての兄弟ノードを取得します。

これを行うには、次の例のようにヘルパー関数にフィルタ関数を追加できます。

const getSiblings = (e, filter) => {
    let siblings = [];

    e = e.parentNode.firstChild;
    do {
        if (!filter || filter(e)) {
            siblings.push(e);
        }
    } while (e = e.nextSibling);

    return siblings;
}Code language: JavaScript (javascript)

次の例では、getSiblings()ヘルパー関数を使用して、アンカー要素のすべての兄弟ノード（アンカー要素でもある）を取得します。

const e = document.querySelector('a.first');

let links = getSiblings(el, (e) => {
    e.nodeName.toLowerCase() === 'a';
});Code language: JavaScript (javascript)