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

獲取下一個(gè)兄弟節(jié)點(diǎn)

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

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

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

獲取上一個(gè)兄弟節(jié)點(diǎn)

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

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

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

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

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

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方法獲取了文檔中的第一個(gè)li元素，然后通過(guò)parentNode屬性獲取了它的父元素ul。父元素的children屬性可以返回一個(gè)該元素的所有子元素列表，在遍歷子元素列表時(shí)，判斷如果當(dāng)前元素不是li元素，就將其添加到一個(gè)siblings數(shù)組中。最后，我們?cè)诳刂婆_(tái)中輸出數(shù)組，就可以看到所有的li元素除了自身以外的兄弟元素了。

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

如果需要獲取特定類型的兄弟節(jié)點(diǎn)，可以使用第三方庫(kù)或原生JavaScript方法。比較好用的方法是使用Array.prototype.filter方法，該方法可以創(chuàng)建一個(gè)新的數(shù)組，其中包含原數(shù)組中通過(guò)測(cè)試（函數(shù)內(nèi)判斷）的所有元素。下面是一個(gè)例子，可以在控制臺(tái)中嘗試輸出li元素的所有下一個(gè)同級(jí)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方法獲取了文檔中的第一個(gè)li元素，然后通過(guò)parentNode屬性獲取了它的父元素ul。父元素的children屬性可以返回一個(gè)該元素的所有子元素列表，使用Array.prototype.filter方法可以篩選出所有下一個(gè)同級(jí)div元素。最后，在控制臺(tái)中輸出數(shù)組，就可以看到所有滿足條件的元素了。

總結(jié)

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