欢迎光临
我的个人博客网站

Javascript连载28-节点之间的关系演示


一、节点之间的关系

  • (1)获取父节点
  • (2)上一个兄弟节点
  • (3)下一个兄弟节点
  • (4)获取标签中的第一个子节点
  • (5)获取标签中的最后一个子节点
  • (6)获取元素的节点
  • (7)获取任意兄弟的节点
  • 节点包括:标签、属性、文本、注释等
  • 直接上代码
    <style>         #box{             width:200px;             height:200px;             background-color: red;         }     </style> </head> <body> <div id="box">     <button class="btn">按钮</button>     <span id="span">         <a href="#">一个链接</a>     </span>     <p class="lk">我是段落标签</p>     <div>哈哈哈</div> </div> <script>     window.onload = function (ev) {         var a = document.getElementsByTagName('a')[0];         console.log(a.parentNode);//获取父节点         console.log(a.parentElement);//也是用来获取父节点,但还有点区别,后面再说         //获取兄弟节点         var span = document.getElementById("span");         //下一个节点         var nextEle = span.nextSibling;//在JS中也会把空格和换行当成一个标签         var nextEle2 = span.nextElementSibling || span.nextSibling;//这样做一个判断,拿来的元素的节点而不是换行或者空格         var preEle = span.previousElementSibling || span.previousSibling;         console.log(nextEle);         console.log(nextEle2);         console.log(preEle);          console.log("-------------------");          var box = document.getElementById("box");         //获取第一个子节点         console.log(box.firstElementChild || box.firstChild);         //获取最后一个节点         console.log(box.lastElementChild || box.lastChild);         //获取所有的节点         console.log(box.childNodes);         //获取所有的元素节点(也就是非换行空格的节点)         console.log(box.children);     } </script> </body> 

Javascript连载28-节点之间的关系演示
Javascript连载28-节点之间的关系演示

二、源码:

  • D28_1_GetAPI.html
  • 地址:https://github.com/ruigege66/JavaScript/blob/master/DD28_1_GetAPI.html
  • 博客园:https://www.cnblogs.com/ruigege0000/
  • CSDN:https://blog.csdn.net/weixin_44630050?t=1
  • 欢迎关注微信
赞(0) 打赏
未经允许不得转载:张拓的天空 » Javascript连载28-节点之间的关系演示
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏