DOM2 和 DOM3

DOM1 级主要定义的是 HTML 和 XML 文档的底层结构。DOM2 和 DOM3 级则在这个结构的基础上引入了更多的交互能力,也支持了更高级的 XML 特性。

样式

访问元素的样式

DOM 样式属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
cssText//它可以访问到style特性中的 CSS 代码。
<div id="box" style="color: red; width: 100px; height: 100px;"></div>
document.getElementById('box').style.cssText;//'color: red; width: 100px; height: 100px;'
length//应用给元素的 CSS 属性的数量
parentRule//表示 CSS 信息的 cssRule 对象。
getPropertyCSSValue(propertyName)//返回包含给定属性值的 CSSValue 对象
getPropertyPrioriry(propertyName)//返回给定的属性使用了 !important 设置,则返回'important';否则返回空字符串
item(index)//返回指定位置的 CSS 属性的名称
getPropertyValue(propertyName)//返回给定属性的字符串值
removeProperty(propertyName)//从样式中删除指定的属性
setProperty(propertyName, value, priority)//将给定属性设置为相应的值,并加上优先权标志('important'或者一个空字符串)

计算的样式

1
getComputedStyle()//接受两个参数:要获取样式的元素和一个伪元素字符串(例如:after),如果不需要伪元素,第二个参数传null。方法返回一个对象,其中包含当前元素的所有计算的样式。在IE中需要使用 currentStyle 属性。

操作样式表

1
document.styleSheets//应用于文档的所有样式

元素大小

偏移量

1
2
3
4
offsetHeight //元素在垂直方向占用空间的大小。包括元素高度、(可见的)水平滚动条高度、上边框和下边框的高度
offsetWidth //元素在水平方向上占用的空间大小。包括元素宽度、(可见的)垂直滚动条高度、左边框和右边框的高度
offsetLeft //元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop //元素的上边框至包含元素的上内边框之间的像素距离

客户区大小

1
2
3
//元素的客户区大小,值得是元素内容及其内边距所占据的空间大小。
clientWidth //元素内容区宽度加上左右内边距宽度
clientHeight //元素内容区高度加上上下内边距高度

滚动大小

1
2
3
4
scrollHeight //没有滚动条下,元素内容的总高度
scrollWidth //没有滚动条下,元素内容的总宽度
scrollLeft //元素左侧滚动距离
scrollTop //元素上方滚动距离

确定元素大小

1
getBoundingClientRect()//返回一个矩形对象,包含4个属性:left、top、right和bottom。