JS 节点的属性 与 元素

节点的属性{

    nodeType 是节点的类型；

    nodeNam 是节点的名字

    nodeValue 节点的值

}可以用节点.属性 取得三个属性的值

节点.nodeType 出来的结果代表类型、如果是：

                    如果是：数字1      那么代表这个节点是个标签节点类型；

                    如果是：数字2      那么代表这个节点是个属性节点类型；

                    如果是：数字3      那么代表这个节点是个文本节点类型；

节点.nodeNam 出来的结果是节点名字、

                    如果是：大写的标签、  那么代表这个节点是个标签节点；

                    如果是：小写的属性名、 那么代表这个节点是个属性节点；

                    如果是：#text、     那么代表这个节点是个文本节点；

节点.nodeValue 出来的结果是节点的值、

                    如果是：null、        那么代表这个节点是个标签节点；

                    如果是：属性的值、    那么代表这个节点是个属性节点；

                    如果是：文本的内容、 那么代表这个节点是个文本节点；

如下图的HTML：

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