JS中节点之间的关系

基本样式和HTML

      <style>
          #box{
                width: 300px;
                height: 300px;
                background-color: blue;
          }
      </style>

   <div id="box">
       <button class="btn">按钮</button>
       <p class="p1">节点之间的关系</p>
       <span>
           <a href="#">我是a标签</a>
       </span>
       <p>我在最后</p>
   </div>

获取父元素

使用parentNode

 <script>
  window.onload = function(){
           var a = document.getElementsByTagName('a')[0];
           console.log(a.parentNode);     //父标签元素
           console.log(a.parentNode.parentNode);   //父标签的父标签
           console.log(a.parentElement);
       }
</script>

上一个兄弟节点

 window.onload = function(){
			//兄弟节点
            var b = document.getElementsByClassName('p1')[0];
            console.log(b.nextSibling);    //拿到的是一个换行,会把换行、注释、空格当作一个标签
            console.log(b.nextElementSibling);    //拿到下一个元素，不包括空格换行等
            //通常写成  b.nextElementSibling||b.nextSibling
       }

下一个兄弟节点

 <script>
        window.onload = function(){
//兄弟节点
 			var b = document.getElementsByClassName('p1')[0];
           console.log(b.previousElementSibling)
           console.log(b.previousSibling)  
 </script>
       }

获取标签中第一个节点和最后一个节点

<script>
        window.onload = function(){
// 拿到子元素
       var c = document.getElementById('box');
        console.log(c.firstElementChild);    //第一个节点
        console.log(c.firstChild);
        console.log(c.lastElementChild);		//组后一个节点
 </script>       
       }

获取所有元素节点

 <script>
        window.onload = function(){
      	 	var c = document.getElementById('box');
        	console.log(c.childNodes);
        	console.log(c.children); 
       }
   </script>