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>