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');