DOM、获取计算后样式

一、DOM:
（1）定义：
Dom是W3C（万维网联盟）的标准, Document Object Model（文档对象模型）的缩写，是针对HTML和XML稳定的一个API(应用程序编程接口)

（2）DOM节点树：

ct_htmltree.gif

--父节点：
parentNode:父节点

--子节点
childNodes:所有子节点
children:所有事标签类型的子节点
firstChild:第一个子节点
lastChild:最后一个子节点

--兄弟节点：
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点

--属性节点：
attributes
document.body.attributes[0];
document.body.attributes.color;
document.body.attributes["onload"];

（3）DOM方法：
--创建节点：
creatElement() 创建标签
createTextNode()创建文本
creatAttribute()创建属性节点

--插入节点
appendChild()在末尾插入
insertBefore(new,XX)在XX的前面插入

--删除：
remove()直接删除
removeChild()删除父节点的某子元素

--替换：
replaceChild(new,old）将谁的子节点old替换成new

（4）DOM属性
offsetHeight:带边框的高度
clientHeight:可视高度（不包含滚动条）
offsetTop/Left:相对于定位父级的距离
clientTop/Left:指边框的大小（上/左）
scrollTop:滚动上去的距离
scrollHeight:可以滚动的距离

dc43df9e2df9.png

（5）window属性
innerWidth：不包含工具栏
outerWidth:包含工具栏

（6）克隆
target.cloneNode(false);
false表浅复制，只赋值target本身
true表深复制，可以复制box子节点

二、获取计算后样式
（1）非IE下：
参数1:要获取的样式的元素
参数2：伪类名称（没有伪类就写null）

var  color = getComputedStyle(div,":before").color;

（2）IE下：

var color = div.currenStyle.color;

注意：获取css样式不能通过：Element.style.left等获取，所获取的内容都为空
兼容写法见js兼容函数文档。。。。