<!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>查询兄弟元素节点</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="item">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var item = document.getElementById('item');
// 1. 获取下一个兄弟元素节点 nextElementSibling; Sibling 兄弟姐妹
console.log(item.nextElementSibling);
// 2. 获取对应元素后的兄弟节点 nextSibling;
// ps: 返回元素节点后的兄弟节点(包含 文本节点(换行 空格) 注释节点)
// 不实用, 了解即可
console.log(item.nextSibling);
// 3.previousElementSibling // 获取前一个兄弟元素节点
console.log(item.previousElementSibling);
// 4.previousSibling 获取对应元素前兄弟节点 . 不实用
console.log(item.previousSibling);
</script>
</body>
</html>
上述运行结果: