js——DOM操作（一）

DOM:Document Object Model  文档对象模型

文档：html页面

文档对象：页面中元素

文档对象模型：定义  为了能够让程序（js）去操作页面中的元素

DOM会把文档看作是一棵树，同时定义了很多方法来操作这颗树中的每一个元素（节点）

DOM节点

如：

getElementById

getElementByTagName

document

document.body

...

//***************************************

childNodes : 只读属性  子节点列表集合

　　标准下：包含了文本和元素类型的节点，也包含非法嵌套的子节点

　　非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套的子节点

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

　　DOM节点类型有12种，比较重要的有：

元素类型	nodeType
元素节点	1
属性节点	2
文本节点	3
注释节点	8
文档节点	9

attributes：只读属性  属性列表集合

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

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

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

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

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

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

firstElementChild：只读属性  第一个子节点

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

　　非标准下不支持这个属性

lastChild || lastElementChild 最后一个子节点

nextSibling || nextElementSibling 下一个兄弟节点

previousSibling || previousElementSibling  上一个兄弟节点

parentNode：只读属性  当前节点的父级节点

　　标准下和非标准下都正常！

offsetParent：只读属性  离当前元素最近的一个有定位属性的父节点

　　如果没有定位父级，默认是body

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

　　ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到触发了layout特性的父节点上

offsetLeft[Top]：只读属性  当前元素到定位父级的距离（偏移值），即到当前元素的offsetParent的距离

　　如果没有定位父级
　　　　offsetParent -> body
　　　　offsetLeft -> html  （ie7以下有可能）

　　如果有定位父级
　　　　ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离
　　　　　　　　如果自己有定位，那么就是到定位父级的距离
　　　　其他：到定位父级的距离

width  height   //**不存在兼容问题

　　style.width：样式宽

　　clientWidth：可视区宽 （包括padding）

　　offsetWidth：占位宽（包括padding和border）

//**************************

操作元素属性的方式：

元素.属性名    //可赋值，可获取值

元素[属性名]    //可赋值，可获取值

　　两者区别：单属性名是变量的时候，不能通过“.”的方式，必须要用“[]”

getAttribute(属性名); 方法，获取指定元素的指定属性的值

setAttribute(属性名，属性值);方法，给指定元素指定的属性设置值

removeAttribute(属性名称); 方法，移除指定元素的指定属性

/**

　　1、用.和[]的形式无法操作元素的自定义属性

　　　　　getAttribute可以操作元素的自定义属性 （无兼容问题）

　　2、getAttribute可以获取元素属性实际的值，如img的src属性值，获取的是设定的实实在在的值（ie7以下还是会返回资源　　　　的绝对路径）

**/

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

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

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

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

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

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

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

/*

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

*/