DOM相关属性，方法，兼容性问题处理小析

DOM:Document Object Model文档对象模型，用于让程序（js）取操作页面中的元素。DOM节点类型有12种。

（一）属性

一、子节点操作
1.所有子节点
（1）元素.childNodes ==>只读，元素子节点列表集合（只包含一级子节点，不包含后辈孙级以下节点）
标准浏览器：包含了文本和元素类型节点，也会包含非法嵌套的子节点。
非标准浏览器：只包含元素类型节点，IE7以下不包含非法嵌套的子节点。
兼容处理：由于文本节点无背景等样式，故在设置样式前用.nodeType判断节点类型。
元素.nodeType得到节点的类型：
1--元素节点；
2--属性节点；
3--文本节点；
元素.attributes ==>只读，获取元素属性名，返回属性列表集合
元素.attributes[n].name ==>得到对应的属性值
（2）元素.children ==>只读，子节点列表集合
标准浏览器下和非标准浏览器下都只包含元素类型的节点，把非法嵌套的标签设置为孙节点。
因此，获取子节点多采取这种方式。
2.第一个子节点
（1）元素.firstChild ==>只读，元素的第一个子节点
标准浏览器：会包含文本类型节点
非标准浏览器：只包含元素类型节点
（2）元素.firstElementChild ==>只读，第一个子节点
标准浏览器：获取第一个元素类型的子节点
非标准浏览器：无此属性
兼容处理：var Ofirst=元素.firstElementChild||元素.firstChild(当元素下无子节点时，此处理方式有问题，会得到

元素下的文本节点，故尽量采用此法：元素.children[0].style.background='red')
3.最后一个子节点
元素.lastChild
元素.lastElementChild
兼容性问题及处理同第一个子节点方式

二、兄弟节点操作
1.元素的下一个兄弟节点
元素.nextSibling
元素.nextElementSibling
兼容性问题及处理同第一个子节点方式
2.元素的上一个兄弟节点
元素.previousSibling
元素.previousElementSibling
兼容性问题及处理同第一个子节点方式

三、父节点操作
1.元素.parentNode ==>只读，当前元素的父节点（无兼容性问题）
2.元素.offsetParent ==>只读，离当前元素最近的一个有定位属性的父节点；如果没有定位的父级，默认为body；IE7以

下，如果当前元素有定位则父节点是HTML；IE7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被

指向到这个触发了layout特性的父节点上。
3.元素.offsetLeft(offsetTop) ==>只读，当前元素到定位父级的偏移值
当有定位父级时：
IE7及以下：
（1）如果自己无定位，那么该属性是到body的距离
（2）如果自己有定位，那么就是到定位父级的距离
其他浏览器：到定位父级的距离
当父级无定位时：
offsetParent:body
offsetLeft,offsetTop:html

四、宽高属性
元素.style.width/height ==>元素的样式宽/高
元素.style.clientWidth/Height ==>元素的可视宽/高=样式宽/高+padding
元素.style.offsetWidth/Height ==>元素的占位宽/高=样式宽/高+padding+border

获取元素绝对位置封装函数：因为不知道该元素的父级是否有定位。
function getPos(obj){
   var pos={left:0;top:0};
   while(obj){
      pos.left+=obj.offsetLeft;
      pos.top+=obj.offsetTop;
      obj=obj.offsetParent;
          }
      return pos;
}

（二）方法

一、动态创建子节点
document.createElement('元素名称') ==>创建元素，还不存在页面里
将元素添加到页面中：
(1)父级.appendChild('要添加的元素')
(2)父级.insertBefort('要添加的元素','被插入的元素') ==>在指定元素前插入一个新元素

二、删除子节点
父级.remove('要删除的子节点')

三、替换子节点
被替换的节点父级.replace('新节点','被替换的节点')

总结：appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已经存在的节点。