<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中不支持