DOM1:主要定义的是HTML和XML文档的底层结构
DOM2、DOM3:在DOM1的基础上,引入了更多的交互能力,也支持了更高级的xml特性。目的在于扩展DOM API,以满足操作XML的所有需求,同时提供更好的错误处理及特性检测能力。
为此,DOM2、DOM3分为许多个模块,分别描述了DOM某个非常具体的子集
有:
DOM2级核心 ——在1级基础上,添加了更多的方法和属性
DOM2级视图 ——为文档定义了基于样式信息的不同视图
DOM2级事件 ——说明了如何使用事件,与DOM文档进行交互
DOM2级样式 ——定义了如何以编程方式来改变和访问css样式信息
DOM2级遍历和范围 ——引入了遍历DOM文档的一些接口函数
DOM2级HTML ——在1级HTML上添加更多的方法和属性
————————————————————————————————————
个人感觉DOM2事件,DOM2样式更普遍,更重要一些。
下一章的事件会具体讲解DOM2事件,这章重点说一下DOM2样式
样式:
在HTML中定义样式,方法3种:
通过<link/>包含外部文件
使用<style/>来嵌入式样式
使用style特性定义不同元素的样式
1、访问对象的样式
每一个支持设置style的元素都自带一个style对象,只包含在js中直接为他设置的style样式,不包含外部link过来,和嵌入样式表经过层叠的样式(就是经过浏览器自己计算处理后 的样式)
可以利用cssText属性,访问style特性中css代码。读模式返回已有代码,写模式直接覆盖原有的css样式
mydiv.style.cssText = "width:25px; height:25px";
getPropertyValue(): 接受属性名参数,返回这个属性名的值
计算的样式:
例如:
<html>
<head>
<style type="text/css">
#mydiv{
background-color: blue;
width:100px;
height:200px;
}
</head>
<body>
<div id="mydiv" style = "background-color="red; border:1px solid black"></div>
</body>
</html>
这个例子中,先是在<style>中嵌入式写入几个样式,又用style写了几个特性,二者内容有相同有不同,那么对于这个div,它的样式都是经过层叠(计算)得来的,不同浏览器可能结果也不一样。
注意!!!! 无论哪个浏览器,计算后的样式都是只读的,不能修改计算后样式对象中的css属性。浏览器中一些默认的属性值也算是计算后的样式,例如visibility,默认值为visible。那么想要对其做修改时,不能直接调用,要先人为设置一下。
2、元素大小
①偏移量
偏移量offset
是一个元素距离其offsetParent的偏移量
offsetHeight: 元素自身的高度,包括:上下边框,内边距(上+下),内容的高度
offsetWidth: 元素自身的宽度,包括:左右边框,内边距(左+右),内容的宽度
offsetLeft:元素的左外边框,到,包含它的元素(offsetParent)左内边框的距离
offsetTop:元素的上外边框,到,包含它的元素(offsetParent)上内边框的距离
如果想知道这个元素在整个页面中的偏移量,可以将offsetParent写一个循环,直至根元素,将所有的偏移量进行累加。
②客户区大小
客户区大小:client
clientHeight:内边距(上+下),内容的高度 //不含边框
clientWidth:内边距(左+右),内容的宽度 //不含边框
③滚动大小
包含滚动内容的大小
scrollHeight:打开滚动条的总高度,即实际大小
scrollWidth:打开滚动条的总宽度