childNodes子节点 、 nodeType节点类型 、parentNode父节点 、firstChild第一个节点 、lastChild最后一个节点 、

childNodes子节点只算第一层，就算一个节点里面再包含一个节点也只视为一个节点。

childNodes会算上文本节点

不管文本还是元素都有nodeType属性。

nodeType==3 是文本节点

nodeType==1 是元素节点

 

如果想获取UL（父节点）下的LI（子节点）是怎样获取呢？用childNode来获取，由于childNodes在高版本的浏览器不兼容所以要用nodeType来解决。

1 <ul id="ul">

2     <li></li>

3     <li></li>

4     <li></li>

5 </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还是兼容浏览器的

 1 <script>

 2     window.onload=function()

 3     {

 4         var oUl=document.getElementById('ul');

 5         for(var i=0;i<oUl.children.length;i++)

 6         {

 7             oUl.children[i].style.background='red';

 8         };

 9     };

10 </script>

 

 

IE6-8                                          IE9-10 Chrome FireFox

firstChild 第一个节点                       firstElementChild 第一个节点

lastChild最后一个节点、                   lastElementChild 最后一个节点

nextSibling 下一同级节点                 nextElementtSibling 下一同级节点

previousSibling 上一同级节点           previousElementSibling 上一同级节点

 1 <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方式获取、设置元素属性

getAttribute(名称)

setAttribute(名称,值)

removeAttribute(名称)

 

封装class选取元素

 1 <script>

 2 function getClass(oParent,sClass)

 3 {

 4     var aResult=[];

 5     var aELe=document.getElementsByTagName('oParent');

 6      

 7      for(var i=0;i<aEle.length;I++)

 8      {

 9          if(aEle[i].classNmae==sClass){

10              aResult.push(ale[i]);

11          }    

12      };

13      return aResult;

14 };

15 </script>

调用

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