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都可以操作动态创建出来的节点，也可以操作已有节点
*/