首页 > 编程笔记 > JavaScript笔记 阅读:137

JS获取父节点和兄弟节点

使用元素的 parentNode 属性可以获取元素的父节点,对一个元素使用多次 parentNode 属性还可以获取其祖先节点。使用元素的 nextSibling 和 previousSibling 属性可以获取元素下一个和上一个兄弟节点,该兄弟节点可能是元素节点、文本节点和注释节点这几种节点中的某一种;如果只需要获取元素的元素兄弟节点,则可以使用 nextElementSibling 和 previousSibling 属性来分别获取元素的下一个和上一个元素兄弟节点。

【例 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:获取元素父节点和兄弟节点

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章