在JavaScript中，獲取兄弟節(jié)點是一種常見的操作，它可以使我們更加靈活地操作DOM樹中的元素，實現(xiàn)自己需要的目的。比如，我們可能需要獲取某個元素的前面或后面的兄弟元素，或者獲取一組兄弟元素中的某個特定元素。本文將為大家介紹如何使用JavaScript獲取兄弟節(jié)點，并且會帶有具體的代碼示例。

獲取下一個兄弟節(jié)點

使用nextSibling屬性可以獲取當前元素的下一個兄弟節(jié)點。但是，可能會遇到一些問題，比如文本節(jié)點就會成為一種不希望獲取的下一個兄弟節(jié)點，因此我們需要用到nextElementSibling屬性。下面是一個例子，可以在控制臺中嘗試輸出li元素的下一個兄弟節(jié)點：

var li = document.querySelector("li");
var nextLi = li.nextElementSibling;
console.log(nextLi);

上面的例子中，我們首先使用querySelector方法獲取了文檔中的第一個li元素，然后使用nextElementSibling屬性獲取了它的下一個兄弟節(jié)點。如果li元素的下一個兄弟節(jié)點是一個div元素，那么在控制臺中就會輸出一個div元素。

獲取上一個兄弟節(jié)點

使用previousSibling屬性可以獲取當前元素的上一個兄弟節(jié)點。和獲取下一個兄弟節(jié)點一樣，使用前面提到的nextElementSibling屬性會更加方便。下面是一個例子，可以在控制臺中嘗試輸出li元素的上一個兄弟節(jié)點：

var li = document.querySelector("li");
var prevLi = li.previousElementSibling;
console.log(prevLi);

上面的例子中，我們使用querySelector方法獲取了文檔中的第一個li元素，然后使用previousElementSibling屬性獲取了它的上一個兄弟節(jié)點。如果li元素的上一個兄弟節(jié)點是一個div元素，那么在控制臺中就會輸出一個div元素。

獲取所有兄弟節(jié)點

如果需要獲取全部的兄弟節(jié)點，可以使用父元素的children屬性并進行遍歷。下面是一個例子，可以在控制臺中嘗試輸出li元素的全部兄弟節(jié)點：

var li = document.querySelector("li");
var siblings = [];
var parent = li.parentNode;
var children = parent.children;
for(var i = 0; i< children.length; i++) {
if(children[i] !== li) {
siblings.push(children[i]);
}
}
console.log(siblings);

上面的例子中，我們首先使用querySelector方法獲取了文檔中的第一個li元素，然后通過parentNode屬性獲取了它的父元素ul。父元素的children屬性可以返回一個該元素的所有子元素列表，在遍歷子元素列表時，判斷如果當前元素不是li元素，就將其添加到一個siblings數(shù)組中。最后，我們在控制臺中輸出數(shù)組，就可以看到所有的li元素除了自身以外的兄弟元素了。

獲取特定類型的兄弟節(jié)點

如果需要獲取特定類型的兄弟節(jié)點，可以使用第三方庫或原生JavaScript方法。比較好用的方法是使用Array.prototype.filter方法，該方法可以創(chuàng)建一個新的數(shù)組，其中包含原數(shù)組中通過測試（函數(shù)內(nèi)判斷）的所有元素。下面是一個例子，可以在控制臺中嘗試輸出li元素的所有下一個同級div元素：

var li = document.querySelector("li");
var divs = Array.prototype.filter.call(li.parentNode.children, function(elem){
return elem.tagName === "DIV";
});
console.log(divs);

上面的例子中，我們首先使用querySelector方法獲取了文檔中的第一個li元素，然后通過parentNode屬性獲取了它的父元素ul。父元素的children屬性可以返回一個該元素的所有子元素列表，使用Array.prototype.filter方法可以篩選出所有下一個同級div元素。最后，在控制臺中輸出數(shù)組，就可以看到所有滿足條件的元素了。

總結(jié)

通過獲取兄弟節(jié)點，JavaScript可以實現(xiàn)更加靈活的DOM操作，完成自己需要的功能。對于開發(fā)者來說，了解如何獲取兄弟節(jié)點是很有必要的。在本文中，我們介紹了獲取下一個兄弟節(jié)點，獲取上一個兄弟節(jié)點，獲取所有兄弟節(jié)點和獲取特定類型的兄弟節(jié)點的方法，并且提供了相應(yīng)的代碼示例。