01.获取父子节点

获取parentNode 父元素节点（得到是离元素最近的父元素节点）

    <div id="parent">
          <div id="child">
          </div>
     </div>
   <!-- 1.获取父节点 -->
   <script>
         var child=document.getElementById("child");
         var parent= child.parentNode;
         console.log(parent)
   </script>

childNodes 子元素节点(这样会获取到空格和换行)

    <div id="parent">
       <p class="one">1</p>
       <p class="one">2</p>
       <p class="one">3</p>
    </div>
    <script>
     var parent=document.getElementById("parent");
     var childs=parent.childNodes;
    </script>

children 子元素节点只获取元素节点()

    <div id="parent">
   <p class="one">1</p>
   <p class="one">2</p>
   <p class="one">3</p>
   <!-- childNodes
   children  只能获取元素节点
   firstChild  获取父元素后面的第一个节点
   firstElementChild 获取父元素下面的第一个元素节点
   lastChild 获取父元素后面的最后一个节点
   lastElementChild 获取父元素下面最后一个节点 -->
    </div>
    <script>
    var parent=document.getElementById("parent");
   var childs=parent.children;
   console.log(childs);

firstChild 获取父元素后面第一个字节点 (包含文本和元素节点)
lastChild 获取父元素后面最后一个节点 (包含文本和元素节点)
firstElementChild 不包含文本和元素节点 children[0]（推荐使用）
lastElementChild 不包含文本和元素节点 childrenchild.length-1