<div id="dv">
  <span>這是div中的第一個span標簽</span>
  <p>這是div中的第二個元素,第一個p標簽</p>
  <ul id="uu">
    <li>喬峰</li>
    <li>鹿茸</li>
    <li id="three">段譽</li>
    <li>卡卡西</li>
    <li>雛田</li>
  </
 
ul>
</div>

結果：

var dvObj=document.getElementById("uu");
//  獲取裏面的每個子節點
//  for(var i=0;i<dvObj.childNodes.length;i++){
//    var node=dvObj.childNodes[i];
//    console.log(‘節點的類型：‘+node.nodeType+‘   ‘+"節點的名字："+node.nodeName+‘   ‘+"節點的值："+node.nodeValue);
//  }
var liobj=document.getElementById(‘three‘);
console.log(liobj.nodeType+‘   ‘+liobj.nodeName+‘   ‘+liobj.nodeValue)
// 1   LI   null 
// 1 代表這個節點是標簽類型
// LI 代表這個節點是屬性名字
// null 代表這個節點是標簽節點

獲取相關的節點：

//12行代碼:都是獲取節點和元素的

  //取得 ul整個節點
  var ulObj=document.getElementById("uu");
  //節點.parentNode：取得父級節點
  console.log(ulObj.parentNode);  // 整個div的內容

  //節點.parentElement 取得父級元素
  console.log(ulObj.parentElement); //整個div的內容（跟節點一樣）

  //節點 .childNodes  取得子節點
  console.log(ulObj.childNodes); // NodeList(11) 裏面是11個子節點 （5個li 6個空格）

  //節點.children 取得子元素
  console.log(ulObj.children);// HTMLCollection(5) 元素只能是標簽（5個li標簽）


  //節點..firstChild  取得第一個子節點
  console.log(ulObj.firstChild);//------------------------#text 是一個文本節點  在IE8中是第一個子元素

  //節點.firstElementChild  取得第一個子元素
  console.log(ulObj.firstElementChild);//----------------- <li>喬峰</li>   註意在IE8中不支持

  // 節點.lastChild  取得最後一個子節點
  console.log(ulObj.lastChild);//------------------------#text 是一個文本節點  IE8中是第一個子元素

  // 節點.lastElementChild  取得最後一個子元素
  console.log(ulObj.lastElementChild);//-----------------<li>雛田</li>  註意在IE8中不支持

  //某個元素的前一個兄弟節點
  console.log(my$("three").previousSibling); //   #text 是一個文本節點

  //某個元素的前一個兄弟元素
  console.log(my$("three").previousElementSibling);//   <li>鹿茸</li> 

  //某個元素的後一個兄弟節點
  console.log(my$("three").nextSibling);//  #text 是一個文本節點

  //某個元素的後一個兄弟元素
  console.log(my$("three").nextElementSibling);//   <li>卡卡西</li>


  //總結:
　　　　　 凡是獲取節點的代碼在谷歌和火狐得到的都是  相關的節點
  　　　　凡是獲取元素的代碼在谷歌和火狐得到的都是   相關的元素
  　　　　從子節點和兄弟節點開始,凡是獲取節點的代碼在IE8中得到的是元素,獲取元素的相關代碼,在IE8中得到的是undefined----元素的代碼,iE中不支持

JS 節點的屬性 與 元素