<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>
<a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a
><a href="#">a5</a>
</li>
<li>
<a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a
><a href="#">a5</a>
</li>
<li>
<a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a
><a href="#">a5</a>
</li>
<li>
<a href="#">a1</a><a href="#">a2</a><a href="#" id="a3">a3</a
><a href="#">a4</a><a href="#">a5</a>
</li>
<li>
<a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a
><a href="#">a5</a>
</li>
</ul>
</body>
<script>
// 先找到一个节点
var a3 = document.getElementById("a3");
//
// console.log(a3);
// 开始定义函数，里面传一个element作为参数
function getSiblings(element) {
// 所有节点
var resultNode = [];
// 所有的哥哥
var previousNode = [];
// 所有弟弟
var nextNode = [];
// 找弟弟
// 定义函数的时候，里面有一个参数element,这个参数在下面的不同的while被用到，所以先定义一个变量接收element
var tmp = element;
// 只要能找到弟弟，就会一直执行while，
while (tmp.nextElementSibling) {
// 找到了弟弟，就把找到的弟弟添加到弟弟这个数组里面
nextNode.push(tmp.nextElementSibling);
// 找到以后，就把下一个节点赋值给他，更新一下节点，继续找，
// 直到找完所有的弟弟才会结束while
tmp = tmp.nextElementSibling;
}
// 现在这个while里面就找到了所有的弟弟
// 经过了这个while循环，里面的element这个参数已经是最后一个节点
// 打印之前，要确保定义的函数已经在调用
// console.log(nextNode);
// 开始定义函数找所有的哥哥
tmp =
element; /* 把一开始的element继续赋值给tmp,就可以接着用这个element */
while (tmp.previousElementSibling) {
// 找到了哥哥，就把找到的弟弟哥哥添加到定义好的哥哥这个数组里面
// 以为是一直往上找，所以这里用unshift
previousNode.unshift(tmp.previousElementSibling);
// 找到以后，就把上一个节点赋值给他，更新一上节点，继续找，
// 直到找完所有的弟弟哥哥才会结束while
tmp = tmp.previousElementSibling;
}
// console.log(previousNode);
// 把找到的哥哥和弟弟两个数组合并(.concat)
resultNode = previousNode.concat(nextNode);
// 执行完函数，在函数里面返回return
return resultNode;
}
// 函数定义好了，需要调用,不然基于这个函数的打印没法实现
console.log(getSiblings(a3));
</script>
</html>
