节点Node

节点:页面中所有的内容，包括属性、标签、文本（文字、换行、空格、回车）

节点的几个属性:
   nodeType属性表示节点的类型
               1–标签、2–内容、3–属性

   nodeName属性表示节点的名字
               标签节点–大写的标签名字、属性节点–小写的属性名字、文本节点–#text

   nodeValue属性表示节点的值
               标签节点–null、属性节点–属性值、文本节点–文本内容
节点的几个对象:

• .parentNode        获取父节点
• .parentElement    获取父元素（输出结果同上）

---

• .childNodes          获取子节点（标签，内容，属性）
• .children               获取子元素(只是标签)

---

• .firstChild              第一个子节点
• .firstElementChild 第一个子元素
• .lastChild               最后一个子节点
• .lastElementChild  最后一个子元素
• .previousSibling     前一个兄弟节点
• .previousElementSibling   前一个兄弟元素
• .nextSibling            后一个兄弟节点
• .nextElementSibling   后一个兄弟元素
  在IE8中，只要是获取节点的都是获取元素，获取元素的都不支持

  // 点击隔行加背景色
  document.getElementById("btn1").onclick=function(){
   var listObj=document.getElementById("ol").childNodes;
   //.childNodes取到的是子节点的元素中所有的标签内容和属性，在这里要取的是标签
   //nodeType属性是值1--标签、2--内容、3--属性
   //nodeName属性表示节点的名字，标签节点--大写的标签名字、属性节点--小写的属性名字、文本节点--#text
   //nodeValue属性表示节点的值，标签节点--null、属性节点--属性值、文本节点--文本内容
   var count=0;
   for(var i=0;i<listObj.length;i++){
    console.log(listObj[i]);
    if(listObj[i].nodeType==1&&listObj[i].nodeName=='LI'){
     var color=count%2?'red':'yellow';
     listObj[i].style.backgroundColor=color;
     count++;
    }
   }
  }
 </script>