DOM基础

　　DOM

　　【(CSS)标签——(HTML)元素——(DOM)节点】

　　元素属性操作

　　第一种：oDiv.style.background='red';

　　第二种：oDiv.style[background]='red';

　　第三种：DOM方式

　　元素属性的操作方式：

　　获取：getAttribute(名称)

　　设置：setAttribute(名称)

　　删除：removeAttribute(名称)

　　什么是DOM?

　　文档对象模型(Document Object Model)

　　浏览器支持的情况

　　主流浏览器IE、chrome、firefox

　　主要是低版本IE浏览器(6-8)对DOM支持不佳

　　子节点与父节点的概念

　　子节点对应的是子元素

　　childNodes 获取元素子节点

　　文本节点

　　元素节点

　　nodeType 节点类型

　　元素节点的节点类型为1，文本节点的节点类型为3。

　　nodeType==3 表明为文本节点

　　nodeType==1 表明为元素节点

　　首尾节点

　　有兼容性问题

　　firstChild、firstElementChild

       在JS中firstChild与firstElementChild是在不同浏览器中存在兼容性问题的，firstChild主要是IE6-8中使用，在高级浏览器中会出现bug。而firstElementChild则主要是高级浏览器中使用。

　　lastChild、lastElementChild

　　兄弟节点

　　有兼容问题

　　nextSibling、nextElementSibling

　　previousSibling、previousElementSibling

　　firstChild、previousSibling应用于IE6-8，

　　nextElementSibling、previousElementSibling应用于高级浏览器。

        （一）通过childNodes获取元素

         childNodes在低版本IE浏览器与高级浏览器之中存在差异性。IE6-8会忽略文本节点，而高级浏览器不会忽略文本节点，造成两者获取元素的差异。nodeType==1表明节点是元素节点，nodeType==3表明是文本节点。        

　　解决childNdoes获取元素的兼容性问题方式：通过if语句判断是否为元素节点来实现对子节点的属性添加，适用于所有浏览器。

　　for(var i=0;i，0<Object.childnodes.length;i++)
　　{
　　     if(Object.childNodes[i].nodeType==1) 　　 
        {

          Object.childNodes[i].style.background='red';
        } 　　

    }

　　用children属性也可以解决childNodes的兼容性问题。

　　children属性和childNodes很相似，它只包含元素节点，是兼容的。

　　for(var i=0;i<object.children.length;i++)
　　{
　　if(object.children[i].nodeType==1)
　　    {
　　         object.childNodes[i].style.background='red';
　　    }
　　}