JavaScript是一門(mén)強(qiáng)大的編程語(yǔ)言，它可以使用DOM (文檔對(duì)象模型)來(lái)訪問(wèn)和操作HTML元素。有時(shí)候，在處理某些元素時(shí)，我們需要獲取它的兄弟元素。在本文中，我們將學(xué)習(xí)如何通過(guò)JavaScript獲取兄弟元素。

假設(shè)我們有一個(gè)HTML代碼塊如下：

<div id="parent">
<div id="child1">Child 1</div>
<div id="child2">Child 2</div>
<div id="child3">Child 3</div>
</div>

在這個(gè)示例中，我們有一個(gè)包含三個(gè)子元素的父元素。我們想要獲取子元素“Child 2”的兄弟元素。對(duì)于這個(gè)問(wèn)題，我們使用以下代碼：

var sibling = document.getElementById("child2").previousElementSibling;
console.log(sibling.innerHTML); // 輸出 "Child 1"

這里，我們正在使用“getElementById”方法來(lái)獲取“Child 2”元素。然后，我們正在使用“previousElementSibling”屬性來(lái)獲取它的前一個(gè)兄弟元素。最后，我們將使用“innerHTML”屬性來(lái)獲取兄弟元素的內(nèi)容。

如果我們想獲取下一個(gè)兄弟元素，我們可以使用“nextElementSibling”屬性。例如：

var sibling = document.getElementById("child2").nextElementSibling;
console.log(sibling.innerHTML); // 輸出 "Child 3"

如果我們希望找到所有兄弟元素，我們可以使用“parentNode”屬性和“childNodes”屬性。例如：

var parent = document.getElementById("parent");
var siblings = parent.childNodes;
for (var i = 0; i< siblings.length; i++) {
if (siblings[i].nodeType == 1 && siblings[i] != document.getElementById("child2")) {
console.log(siblings[i].innerHTML); // 輸出 "Child 1" 和 "Child 3"
}
}

在這個(gè)例子中，我們首先使用了“getElementById”方法獲取父元素，“parentNode”屬性返回父元素節(jié)點(diǎn)。然后，我們使用“childNodes”屬性獲取所有子節(jié)點(diǎn)，并使用“for”循環(huán)迭代它們。 我們?cè)诘惺褂谩皀odeType”屬性來(lái)過(guò)濾文本節(jié)點(diǎn)，并使用一個(gè)條件來(lái)確保我們不選擇正在處理的元素的兄弟元素（這是“Child 2”）。

在JavaScript中獲取兄弟元素可能非常有用，因?yàn)樗试S您動(dòng)態(tài)更改HTML代碼中的元素。如果您了解如何獲取兄弟元素，您將能夠使用JavaScript創(chuàng)建更強(qiáng)大和動(dòng)態(tài)的網(wǎng)站。