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

发表评论
415 次浏览

A+

所属分类：Web前端

一、节点之间的关系

（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-节点之间的关系演示