JavaScript中的兄弟節(jié)點 JavaScript中，兄弟節(jié)點是指與當前節(jié)點在同一級別上的節(jié)點。在DOM樹中，每個節(jié)點都有一些兄弟節(jié)點，這些節(jié)點共同組成了DOM樹的一個分支。 例如，以下代碼中，ul節(jié)點有三個子節(jié)點li，每個li節(jié)點是ul的一個兄弟節(jié)點：

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

在許多情況下，您可能需要使用JavaScript尋找元素的兄弟節(jié)點。在此篇文章中，我們將介紹如何使用JavaScript來查找兄弟節(jié)點以及訪問和操作它們的屬性。 查找兄弟節(jié)點 要查找元素的兄弟節(jié)點，我們可以使用parentNode屬性來獲取當前節(jié)點的父節(jié)點，然后使用其childNodes屬性來獲取父節(jié)點下的所有子節(jié)點，之后遍歷這些子節(jié)點，就可以訪問所有兄弟節(jié)點了。 例如，以下代碼將 ul 元素的所有兄弟節(jié)點打印在控制臺上：

const list = document.querySelector('ul');
const siblings = [];
let sibling = list.firstChild;
while (sibling) {
if (sibling.nodeType === 1 && sibling !== list) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
console.log(siblings);

在 上述示例中，我們首先通過querySelector方法定位到頁面上的ul元素，然后將其第一個子節(jié)點作為初始的兄弟節(jié)點保存在變量sibling中。方法遍歷所有兄弟節(jié)點，如果該節(jié)點的nodeType為1（表示它是一個元素節(jié)點）并且不等于ul節(jié)點本身，那么就將其添加到siblings數(shù)組中。 使用兄弟節(jié)點 一旦我們找到了元素的兄弟節(jié)點，我們就可以開始對它們進行操作。 訪問兄弟節(jié)點 訪問兄弟節(jié)點最簡單的方式是使用nextSibling和previousSibling屬性。currentNode.nextSibling屬性返回當前節(jié)點的下一個節(jié)點，currentNode.previousSibling屬性返回它的前一個兄弟節(jié)點。 例如，以下代碼監(jiān)視鼠標事件，并向控制臺輸出當前元素的下一個兄弟節(jié)點：

const myElement = document.getElementById('myElement');
myElement.addEventListener('mousemove', (event) =>{
console.log(event.target.nextSibling);
});

在上述示例中，我們選擇一個具有ID“myElement”的元素，然后使用addEventListener方法將mousemove事件綁定到該元素。每次鼠標移動時，我們都會在控制臺上打印事件目標（即當前元素）的下一個兄弟節(jié)點。 修改兄弟節(jié)點 在某些情況下，我們可能需要使用JavaScript修改某個兄弟節(jié)點的屬性。例如，以下代碼演示如何通過單擊元素以切換類名：

const myElement = document.getElementById('myElement');
myElement.addEventListener('click', (event) =>{
const sibling = event.target.nextSibling;
sibling.classList.toggle('highlight');
});

在上述示例中，我們使用getElementById方法選擇具有ID“myElement”的元素并將click事件添加到該元素，每次單擊元素時都會觸發(fā)此事件。在事件處理程序中，我們將事件目標（即當前元素）的下一個兄弟節(jié)點保存在變量sibling中，然后使用classList方法切換該元素的類名稱highlight，以傳達該元素處于活動狀態(tài)的信息。 總結 在本篇文章中，我們簡單介紹了JavaScript中的兄弟節(jié)點，并展示了如何使用代碼查找，訪問和修改兄弟節(jié)點。雖然這些技術可能只是JavaScript編程的些許技巧，但了解它們可以使您的代碼更加靈活和強大。