使用 JavaScript 獲取元素的下一個和上一個兄弟姐妹

要獲取元素的下一個和上一個兄弟姐妹，可以使用該元素的 nextElementSibling 和 previousElementSibling 屬性。

假設您有以下項目列表：

<ul>
    <li>🍔</li>
    <li>🍕</li>
    <li id="drink">🍹</li>
    <li>🍲</li>
    <li>🍩</li>
</ul>

現在您想在 #drink 之前和之後立即獲取列表項 .

您可以使用 previousElementSibling 屬性來獲取兄弟之前 一個元素。在之後立即獲得兄弟姐妹 一個元素，使用 nextElementSibling 屬性：

const drink = document.querySelector('#drink');

// get previous sibling
const pizza = drink.previousElementSibling;

console.log(pizza.innerText); // 🍕

// get next sibling
var pot = drink.nextElementSibling;

console.log(pot.innerText); // 🍲

獲取所有以前的兄弟姐妹

要獲取元素的所有先前兄弟，可以使用以下代碼片段：

const previousSiblings = (elem) => {
    // create an empty array
    let siblings = [];

    // loop through previous siblings until `null`
    while (elem = elem.previousElementSibling) {
        // push sibling to array
        siblings.push(elem);
    }
    return siblings;
};

const drink = document.querySelector('#drink');

// get all previous siblings
const siblings = previousSiblings(drink);

siblings.forEach(li => console.log(li.innerText));

// 🍕
// 🍔

獲取所有下一個兄弟姐妹

以下示例演示瞭如何獲取元素的所有下一個兄弟：

const nextSiblings = (elem) => {
    // create an empty array
    let siblings = [];

    // loop through next siblings until `null`
    while (elem = elem.nextElementSibling) {
        // push sibling to array
        siblings.push(elem);
    }
    return siblings;
};

const drink = document.querySelector('#drink');

// get all next siblings
const siblings = nextSiblings(drink);

siblings.forEach(li => console.log(li.innerText));

// 🍲
// 🍩

nextSibling呢？ 和 previusSibling ?

您可能已經看到或聽說過 nextSibling 和 previousSibling StackOverflow 上的屬性。

這兩個屬性或多或少都做同樣的事情，返回元素的下一個和前一個兄弟姐妹。但是，它們之間存在根本區別。

nextSibling 和 previousSibling 屬性返回可能是文本節點（空白）或註釋節點的下一個和上一個兄弟節點。但是，nextElementSibling 和 previousElementSibling 總是返回不包括空格和註釋的元素兄弟節點。

瀏覽器兼容性

nextElementSibling 和 previousElementSibling 屬性適用於所有現代瀏覽器，以及 IE9 及更高版本。