DOM1

DOM概念

DOM:doucment object model 文档对象模型

文档：HTML

文档对象：页面中的元素

文档对象模型：w3c定义 为了能够让js操作页面中的元素定义出来的一套标准

DOM会把文档看做一个物体，树状结构树中的每一个元素就是元素节点 同事定义了个很多方法来操作这个树每 一个元素（节点）

如：

   document

   document.body

   getElementById（）；

   getElementByTagName（）;都是DOM定义的

DOM节点的类型有很多种：12种

1元素类型

2属性类型  attributes

3文本类型

nodeType：节点的意思  只读属性   

obj.NodeType当前元素的节点类型  

1,2,3返回的数字对应节点

attributes：元素.attributes.name /length /value 

childNodes  属性 只读

oList.childNodes  子节点列表集合 需要通过下标获取元素

oList.childNodes.length

标准类型浏览器是9个  包含了文本和元素节点  也会包含非法嵌套的子节点

非标准类型浏览器是4个 只包含了元素节点 ie7以下不会包含非法子节点

只包含一级子节点，不包含孙级以下的 

childNodes不推荐使用建议

children：只读 属性 子节点列表结合

                标准下只包含元素类型的节点

                ie非标准下只包含元素类型的节点

childNodes childNodes.length  childNodes[i]  childNodes[i].nodeType

children children.length children[i]  children[i].nodeType 

attributes

代码片段：

子节点和兄弟节点操作

firstChild: 只读属性 第一个子节点

    标准下：firstChild会包含文本类型和元素类型的节点

    非标准下：只包含元素节点

firstElementChild: 只读属性 

    标准下获取第一个元素类型节点 

    非标准浏览器下不支持

这种方式一般有隐形的问题，如果元素没有子节点，标准下oList.firstElementChild会返回一个null 也是就是false

继续走后面oList.firstChild会返回所有的节点第一个节点是文本节点，没有样式显示

最好的方法是    oList.chilren[0].   只找元素节点

firstChild:获取元素的第一个子节点  
firstElementChild:获取元素的第一个子节点
var oFirst = oList.firstChild ||oList.firstElementChild;兼容

lastChild;获取元素的最后子节点
lastElementChild;获取元素的最后子节点
var oLast = oList.firstChild ||oList.firstElementChild;兼容

nextSibling;获取元素的下一个兄弟节点
nextElementSilbling;获取元素的下一个兄弟节点
var oNext = oList.nextsibling ||oList.nextElementSibling;兼容

previousSibling;获取元素的上一个兄弟节点
previousElementSibling;获取元素的上一个兄弟节点
var oPrev = oList.previousSibling ||oList.previousElementSibling;兼容

parentNode、offsetParent父节点

parentNode: 元素.parentNode  当前元素的父节点 没有兼

offsetParent： 元素.parentNode 只读属性  父节点 有多个的话是距离最近的有定位的父节点

问题：如果没有定位父级的话默认是body

        IE7以下如果当前元素没有定位默认是body如果有定位则是html

        IE7以下如果当前元素的某个父级触发了Layout，那么offsetParent就是指向当前触发的父节点上

元素的各种位置尺寸宽高

offsetLeft/Top: 只读 属性 当前元素到定位父级的距离

到当前元素的offsetParent的距离

 标准下如果自己没有定位父级有定位，那么offsetLeft[Top]是到定位父级的距离50

 IE7下如果自己没有定位父级有定位，那么offsetLeft[Top]是到body的距离100

 标准下如果自己有定位父级有定位，那么offsetLeft[Top]是到定位父级的距离50

 IE7下如果自己有定位父级有定位，那么offsetLeft[Top]是到定位父级的距离50

标准下如果自己有定位父级没有定位，那么offsetLeft[Top]是到body的距离108

 IE7下如果自己有定位父级没有定位，那么offsetLeft[Top]是到html的距离110

如果没有定位父级，

        offsetParent ->body /ie7以下 ->html

如果有定位父级

        IE7下如果自己没有定位，那么offsetLeft[Top]是到body的距离

        如果有定位就是到有定位父级的距离

style.width:样式宽

clientWidth:样式宽+padding  {可视区宽度}

offsetWidth:占位宽 样式宽+padding+border   不包含margin

封装一个元素到页面距离的函数

function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}

var p = getPos( oDiv3 );
alert( p.left );

元素的创建

document.createElement(标签名称); 创建元素

父级.removeChild(要删除的元素); 删除元素

父级.appendChild(要添加的元素) 方法 追加子元素

父级.replaceChild(新节点，被替换节点) 替换子节点

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点

父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素

            在ie下如果第二个参数的节点不存在，会报错

            在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加