DOM基础

DOM节点

获取子节点
childNodes oUl.childNodes.length
在火狐下空格算一个文本节点
nodeType 1算作元素节点，3算作文本节点
children 兼容性 不会吧空文本选出来

this 当前发生时间的元素

parentNode 父节点

offset Parent：寻找当前元素定位的东西

首尾子节点

获取首个子节点
firstChild //IE下用

fisteElementChild//火狐下用

获取最后的子节点

lastChild//IE下用

兄弟节点都有兼容性问题

nextSibiling //IE下用  nextElementSibiling //火狐下用
previousSibling//IE下用

操纵元素属性

获取：getAttribute(属性名)
设置：setAttribute(属性名，设为什么值)
删除：removeAttribute(属性名)

DOM元素查找

className 选择元素 先全部选出来在一个个判断

        <script type="text/javascript">

            // window.onload=function()
            // {
            //     var oBt=document.getElementById('ul1');
            //     var aLi=document.getElementsByTagName('li');
            //     var i=0;
            //     for(i=0;i<aLi.length;i++)
            //     {
            //         if(aLi[i].className=='box')
            //         {
            //             aLi[i].style.background='blue';
            //         }
            //     }
            // }



            //封装
             function getByClass(oparent,sclass)
             {
                var aEle=oparent.getElementsByTagName('*');
                var aResult=[];
                var i=0;
                for(i=0;i<aEle.length;i++)
                {
                    if(aEle[i].className==sclass)
                    {
                        aResult.push(aEle[i]);// 将所有要用的元素放进数组里
                    }
                    
                }
                return aResult;
             }
             window.onload=function()
             {
               var oUl=document.getElementById("ul1");
               var aBx=getByClass(oUl,'box');
               var i=0;
               for(i=0;i<aBx.length;i++)
               {
                aBx[i].style.background='red';
               }
             }
        </script>