5，jsDOM 子节点，父节点，第一个子节点，最后一个子节点，DOM获取属性，设置属性

ECMAScript DOM BOM

DOM:DocumentObjectModel 文档对象模型：一种用于HTML和XML文档的编程接口。

---

childNodes:子节点；子节点只包含父级下的第一层

alert(oParent.childNodes);ie6-8中只包括元素节点（值为1）；高级浏览器中会包括文本节点（值为3）；

<ul id='ul1'>
    <li></li>
    <li></li>
    <li></li>
</ul>

window.onload=function(){
  var oUl=document.getElementById('ul1');  
  for(var i=0;i<oUl.childNodes.length;i++){
      if(oUl.childNodes[i].NodeType ==  1){
           oUl.childNodes[i].style.background='red';
    }  
  }  
}

 

用children在ie和高级浏览器中都只包括元素节点；

parentNode:父节点；

ie6~8　　　　　　　　　　ie9,chrom,firefox

firstChild　　　　　　　　firstElementChild第一个子节点

lastChild　　　　　　　　lastElementChild最后一个子节点

nextSibling　　　　　　 nextElementSibling下一个子节点

previousSibling　　　　 previousElementSibling前一个子节点

<script>
 2      window.onload=function()
 3      {
 4         var oUl=document.getElementById('ul');
 5          if(oUl.firstElementChild){
 6             oUl.firstElementChild.style.background='red'; //IE9-10 Chrome FireFox
 7         }
 8          else{
 9             oUl.firstChild.style.background='red'; //IE6-8
10         }
11      };
12 </script>

---

DOM方式获取，设置元素属性：                        获取元素属性其他方法：object.style.name

setAttribute(name,value,);设置　　　　　　　object.style[name]=value;

getAttribute(name);获取　　　　　　　　　　通过className;

removeAttribute(name);移出

通过className获取元素，封装函数；

<ul id='ul1'>
    <li class='box'></li>
    <li></li>
    <li class='box'></li>
    <li></li>
    <li></li>
</ul>

<script>
    window.onload=function(){
    var oUl=document.getElementById('ul1');
    getByClassName(oUl,'box');
}
//通过className获取元素；
function getByClassName(oParent,sClass){
    var aLi=oParent.getElementsByTagName('li');
    var aName=[];
    for(var i=0;i<aLi.length;i++){
        if(aLi[i].className == 'sClass'){
        aName.push(ali[i]);
}
    return aName;
}
}
</script>