【一】、JS獲取子節點的方式
    1，通過獲取dom方式直接獲取子節點
       1） document.getElementById("ID");
       2） document.getElementsByTagName("tagName")  
       3） document.getElementsByClassName("className") 
       4） document.getElementsByName("Name")
       5） document.documentElement //獲取HTML元素
              document.body//獲取body元素
       6） document.querySelector(CSS selectors)獲取一個
　          document.querySelectorAll()獲取多個

    2，通過childNodes集合，獲取子節點
          使用childNodes獲取子節點的時候，childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點資訊。【需要進行過濾，通過正則表示式】

           var b =document.getElementById("test").childNodes;

    3，通過children陣列，來獲取子節點
          利用children來獲取子元素是最方便的，他也會返回出一個數組。對其獲取子元素的訪問只需按陣列的訪問形式即可。

           var getFirstChild = document.getElementById("test").children[0];

    4，直接獲取第一個子節點：firstChild
         firstChild來獲取第一個子元素，但是在有些情況下我們列印的時候會顯示undefined，這是什麼情況呢？？其實firstChild和childNodes是一樣的，在瀏覽器解析的時候會把他當換行和空格一起解析，其實你獲取的是第一個子節點，只是這個子節點是一個換行或者是一個空格而已。那麼不要忘記和childNodes一樣處理呀。

         var getFirstChild = document.getElementById("test").firstChild;

     5，通過firstElementChild，獲取第一個子節點
         使用firstElementChild來獲取第一個子元素的時候，這就沒有firstChild的那種情況了。會獲取到父元素第一個子元素的節點 這樣就能直接顯示出來文字資訊了。他並不會匹配換行和空格資訊。

          var getFirstChild = document.getElementById("test").firstElementChild;

      6，直接獲取最後一個子節點：lastChild，lastElementChild
         lastChild獲取最後一個子節點的方式其實和firstChild是類似的。同樣的lastElementChild和firstElementChild也是一樣的。不再贅餘。

         var getLastChildA = document.getElementById("test").lastChild;
         var getLastChildB = document.getElementById("test").lastElementChild;

  【二】、JS獲取父節點的方式
      1，parentNode，獲取父節點
           獲取的是當前元素的直接父元素。parentNode是w3c的標準。

           var p  = document.getElementById("test").parentNode;

       2，parentElement，獲取父節點
           parentElement和parentNode一樣，只是parentElement是ie的標準。

           var p1 = document.getElementById("test").parentElement;

       3，offsetParent，獲取所有父節點
          一看offset我們就知道是偏移量 其實這個是於位置有關的上下級 ，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有節點資訊。

          var p2 = document.getElementById("test").offsetParent;

   【三】、JS獲取兄弟節點的方式
       1，通過獲取父親節點再獲取子節點來獲取兄弟節點
          var brother1 = document.getElementById("test").parentNode.children[1];

       2，獲取上一個兄弟節點：previousSibling，previousElementSibling
          在獲取前一個兄弟節點的時候可以使用previousSibling和previousElementSibling。他們的區別是previousSibling會匹配字元，包括換行和空格，而不是節點。previousElementSibling則直接匹配節點。

          var brother2 = document.getElementById("test").previousSibling;
          var brother3 = document.getElementById("test").previousElementSibling;

       3，獲取下一個兄弟節點：nextSibling，nextElementSibling
         同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是類似的。

          var brother4 = document.getElementById("test").nextSibling;
          var brother5 = document.getElementById("test").nextElementSibling;

  【四】補充：CSS組合選擇器：

      （1）後代選擇器(以空格分隔)：

               div p{ .... }   選取 <div> 元素中所有 <p> 元素

      （2）子元素選擇器(以大於號分隔）:

               div > p{ .... }   選取<div>元素中所有直接子元素 <p>

      （3）相鄰兄弟選擇器（以加號分隔）

              div + p{ .... }   選取所有位於 <div> 元素後的第一個 <p> 元素

      （4）普通兄弟選擇器（以破折號分隔）

              div ~ p{ .... }    選取所有 <div> 元素之後的所有相鄰兄弟元素 <p>

        -----原文轉載：https://blog.csdn.net/laok_/article/details/75760572