DOM1级主要定义的是HTML和XML文档的底层结构,而DOM2和DOM3则在这个结构的基础上引入了更多的交互能力,由于DOM2和DOM3引入了许多模块,下面只讲述一些常用实用的变化
Node类型的变化
isSupported()
与hasFeature()方法类似,用于确定当前节点具有什么能力,接收特征名和特征版本号作为参数
比较节点
isSameNode()用于比较两个节点的引用是否一样
isEqualNode()用于比较两个节点是相同的类型
样式
获取和修改元素的样式
任何支持style特性的HTML元素可以通过其style属性来访问对应的样式,但对于使用短划线的样式要转成驼峰大小形式,如:
myDiv.style.backgroundColor = "blue";
另外style属性只可以获取通过HTML的style特性指定的所有样式信息,但不包含于外部样式表或嵌入样式表经层叠而来的样式
样式属性和方法
- cssText: 通过它能够访问到style特性中的css代码
- length: 应用给元素属性的数量
- parentRule: 表示css信息的cssRule对象
- getPropertyCssValue(propertyName): 返回包含给定属性值的CSSValue对象
- getPropertyPriority(propertyName):如果给定的属性使用了!important设置,则返回"important";否则返回空字符串
- getPropertyValue(propertyName) :返回给定属性的字符串值(常用)
- item(index) :返回给定位置的css属性名称
- removeProperty(propertyName) :从样式中删除给定属性
- setProperty(propertyName,value,priority) :将给定属性设置为相应的值,并加上优先权标志
计算的样式
style对象并不包含那些从其他样式表层叠而来并影响到当前元素的样式信息,因此在document.defaultView上提供了getComputedStyle()方法
getComputedStyle()方法接收两个参数:①要取得的计算样式的元素②一个伪元素字符串,可以为null
返回一个CSSStyleDeclaration对象,包含当前元素的所有计算的样式
注意:IE不支持getComputedStyle()方法,但每个具有style属性的元素有一个currentStyle属性,包含当前元素全部计算后的样式,另外要记住所有计算的样式都是只读的
元素大小
- 偏移量
元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(不包括外边距),一下四个属性可以取得元素的偏移量
- offsetHeight:元素在垂直方向上占用的空间大小
- offsetWidth:水平方向大小
- offsetLeft:元素的左外边框至包含元素的左内边框的像素距离
- offsetRight:同理
- 客户区大小
客户区大小指的是元素内容及其内边距所占据的空间大小,有关客户区大小的属性有两个:
- clientWidth: 元素内容区宽度加上左右内边距宽度
- clientHeight: 元素内容区高度加上上下内边距高度
注意:客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内
- 滚动大小
所谓滚动大小指的是包含滚动内容的元素的大小,有4个相关属性:
-scrollHeight: 在没有滚动条的情况下,元素内容的总高度
-scrollWidth:在没有滚动条的情况下,元素内容的总宽度
-scrollLeft:被隐藏在内容区左侧的像素数
-scrollTop:被隐藏在内容区域上方的像素数
