获取元素的兄弟节点

要获取元素的下一个兄弟节点和上一个兄弟节点，可以使用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)