JavaScript 选择兄弟元素
元素的下一个同级元素、上一个同级元素以及所有同级元素，也称为兄弟元素，还可以称为相邻元素
在本教程中，您将学习如何选择元素的下一个同级元素、上一个同级元素以及所有同级元素，也称为兄弟元素，还可以称为相邻元素。
假设您的 HTML 文档中包含以下由 ul 和 li 元素构建的列表：
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li>About Us</li>
</ul>获取下一个兄弟元素
要获取元素的下一个同级兄弟元素，可以使用节点的 nextElementSibling 属性：
let nextSibling = currentNode.nextElementSibling;如果当前节点是所有兄弟元素中的最后一个元素，则 nextElementSibling 属性是 null。
下面的示例使用 nextElementSibling 属性获取与类名 current 元素相邻的下一个同级元素：
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;
console.log(nextSibling);输出：
<li>Careers</li>在这个例子中：
- 首先，使用
document的querySelector方法并指定类名current选择一个元素。 - 其次，使用已选择节点
nextElementSibling属性获取下一个同级元素。
要获取某个元素的所有下一个同级元素，可以使用以下代码：
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;
while(nextSibling) {
console.log(nextSibling);
nextSibling = nextSibling.nextElementSibling;
}获取上一个兄弟元素
要获取元素的前一个同级元素，可以使用元素节点的 previousElementSibling 属性：
let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;如果当前元素是所有兄弟元素的第一个元素，则 previousElementSibling 属性返回 是 null。
下面的示例使用 previousElementSibling 属性来获取与类名 current 相同的同级元素：
let current = document.querySelector('.current');
let prevSiblings = current.previousElementSibling;
console.log(prevSiblings);下面示例选择与类名 current 同级并在之前的所有元素：
let current = document.querySelector('.current');
let prevSibling = current.previousElementSibling;
while(prevSibling) {
console.log(prevSibling);
prevSibling = current.previousElementSibling;
}获取指定元素的所有兄弟元素
要获取元素的所有同级元素，我们将使用以下逻辑：
- 首先，选择要查找其同级元素的父元素。
- 其次，选择父元素的第一个子元素。
- 第三，将第一个元素添加到同级数组中。
- 第四，选择第一个元素的下一个同级元素。
- 最后，重复第3步和第4步，直到没有兄弟元素为止。如果下一个兄弟元素是父元素的第一个元素，请跳过第三步。
let getSiblings = function (e) {
// 声明数组 siblings 存储所有兄弟元素
let siblings = [];
// 如果没有父元素，直接返回空数组
if(!e.parentNode) {
return siblings;
}
// 父元素的地第一个子元素
let sibling = e.parentNode.firstChild;
// 获取所有兄弟元素
while (sibling) {
if (sibling.nodeType === 1 && sibling !== e) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Siblings</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li>About Us</li>
</ul>
<script>
let getSiblings = function (e) {
// for collecting siblings
let siblings = [];
// if no parent, return no sibling
if(!e.parentNode) {
return siblings;
}
// first child of the parent node
let sibling = e.parentNode.firstChild;
// collecting siblings
while (sibling) {
if (sibling.nodeType === 1 && sibling !== e) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};
let siblings = getSiblings(document.querySelector('.current'));
siblingText = siblings.map(e => e.innerHTML);
console.log(siblingText);
</script>
</body>
</html>
输出：
["Home", "Products", "Careers", "Investors", "News", "About Us"]结论
nextElementSibling 返回指定元素的下一个同级元素，如果元素是所有兄弟元素最后一个元素则 nextElementSibling 属性是 null。
previousElementSibling 返回指定元素的上一个同级元素，如果元素是所有兄弟元素最前面的一个元素则 previousElementSibling 属性是 null。
要获取元素的所有同级元素，您可以使用 nextElementSibling 属性的辅助函数。
