使用元素的 parentNode 属性可以获取元素的父节点，对一个元素使用多次 parentNode 属性还可以获取其祖先节点。使用元素的 nextSibling 和 previousSibling 属性可以获取元素下一个和上一个兄弟节点，该兄弟节点可能是元素节点、文本节点和注释节点这几种节点中的某一种；如果只需要获取元素的元素兄弟节点，则可以使用 nextElementSibling 和 previousSibling 属性来分别获取元素的下一个和上一个元素兄弟节点。
图 1：获取元素父节点和兄弟节点
【例 1】获取元素父节点和兄弟节点。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素父节点和兄弟节点</title>
</head>
<body>
<ul id='ul1'>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<script>
var oUl = document.getElementById('ul1');
var aLi = oUl.children;
console.log("li元素的父元素为：");
console.log(aLi[0].parentNode);
console.log("li元素的祖父元素为：");
console.log(aLi[0].parentNode.parentNode);
console.log("第二个li元素的上一个兄弟元素为：");
console.log(aLi[1].previousElementSibling);
console.log("第二个li元素的下一个兄弟元素为：");
console.log(aLi[1].nextElementSibling);
console.log("第四个li元素为：");
console.log(aLi[1].nextElementSibling.nextElementSibling);
</script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
图 1：获取元素父节点和兄弟节点
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/24017.html