childNodes子節點 、 nodeType節點類型 、parentNode父節點 、firstChild第一個節點 、lastChild最后一個節點 、

childNodes子節點只算第一層，就算一個節點里面再包含一個節點也只視為一個節點。

childNodes會算上文本節點

不管文本還是元素都有nodeType屬性。

nodeType==3 是文本節點

nodeType==1 是元素節點

 

如果想獲取UL（父節點）下的LI（子節點）是怎樣獲取呢？用childNode來獲取，由於childNodes在高版本的瀏覽器不兼容所以要用nodeType來解決。

<ul id="ul">
    <li></li>
    <li></li>
    <li></li>
</ul>

<script>
window.onload=function()
{
    oUl.document.getElementById('ul');

    for(var i=0;i<oUl.childNodes.length;i++)
    {
        if(oUl.childNodes[i]==1){  //元素節點
            oUl.childNodes.style.background='red';
        }
    };
};
</script>

 

children可以代替childNodes，children不包括文本節點，children還是兼容瀏覽器的

<script>
    window.onload=function()
    {
        var oUl=document.getElementById('ul');
        for(var i=0;i<oUl.children.length;i++)
        {
            oUl.children[i].style.background='red';
        };
    };
</script>

 

 

IE6-8                                          IE9-10 Chrome FireFox

firstChild 第一個節點                       firstElementChild 第一個節點

lastChild最后一個節點、                   lastElementChild 最后一個節點

nextSibling 下一同級節點                 nextElementtSibling 下一同級節點

previousSibling 上一同級節點           previousElementSibling 上一同級節點

<script>
     window.onload=function()
     {
        var oUl=document.getElementById('ul');
         if(oUl.firstElementChild){
            oUl.firstElementChild.style.background='red'; //IE9-10 Chrome FireFox
        }
         else{
            oUl.firstChild.style.background='red'; //IE6-8
        }
     };
</script>

 

用DOM方式獲取、設置元素屬性

getAttribute(名稱)

setAttribute(名稱,值)

removeAttribute(名稱)

 

封裝class選取元素

<script>
function getClass(oParent,sClass)
{
    var aResult=[];
    var aELe=document.getElementsByTagName('oParent');
     
     for(var i=0;i<aEle.length;I++)
     {
         if(aEle[i].classNmae==sClass){
             aResult.push(ale[i]);
         }    
     };
     return aResult;
};
</script>

調用

var box=getClass(oUl,'box');