资讯专栏INFORMATION COLUMN

DOMJS高级程序设计笔记——DOM2和DOM3

zzir / 857人阅读

摘要:对象包含下列属性返回整条规则对应的文本包括选择符和花括号返回当前规则的选择符一个对象返回规则中所有的样式当前规则所属的样式表表示规则类型的常量值。从文档中分离解除引用推荐在使用完范围后再执行上述两个步骤。

DOM1级主要定义了HTML和XML文档的底层结构,DOM2和DOM3则在DOM1的基础上引入了更多的交互功能,支持了更高级的XML特性。DOM2和DOM3分为许多模块(模块之间具有某种联系),这些模块如下:

DOM2级核心:在1级核心基础上,为节点添加了更多方法和属性。

DOM2级视图:为文档定义了基于样式信息的不同视图

DOM2级HTML:在1级HTML基础上构建,添加了更多属性、方法和新接口

DOM2级样式:定义了如何以编程方式来访问和改变CSS样式信息

DOM2级遍历和范围:引入了遍历DOM文档和选择其特定部分的新接口

DOM2级事件:说明了如何以编程方式来访问和改变CSS样式

DOM3级XPath

DOM3级加载与保存

一、DOM的变化 (一)针对xml命名空间的变化

有了XML命名空间,不同XML文档的元素就可以混合在一起,共同构成格式良好的文档,而不必担心发生命名冲突。从技术上说,HTML不支持XML命名空间,但XHTML支持XML命名空间。

在此,先不讨论针对xml命名空间的变化,后续有需要再进行更新。

(二)其他方面的变化

其他方面的变化与XML命名空间无关,这些变化是为了确保API的可靠性及完整性

1、DocumentType类型的变化

DocumentType类型新增了3个属性(在网页中很少需要使用以下三个属性访问此类信息):

publicId

systemId

internalSubset

2、Document类型的变化 3、Node类型的变化 4、框架的变化 二、样式 (一)访问元素的样式 1、DOM style属性的属性和方法

DOM2级样式规范为style对象定义了一些属性和方法:

cssText:返回style属性中的CSS代码

length:HTML元素的style属性中包含的CSS属性的个数

item(index):

getPropertyValue(propertyName)

getPropertyCSSValue(propertyName):返回一个CSSValue(实际开发中用得很少)

getPropertyPriority(propertyName):若属性使用了!important设置,则返回"!important";否则,返回空字符串

removeProperty(propertyName)

setProperty(propertyName,value,priority):参数priority的取值为"!important"或空字符串

parentRule:表示CSS信息的CSSRule对象

2、计算的样式

元素的style对象只包含通过style属性设置的样式信息,不包含其他样式表中的信息。为了得到应用在当前元素的所有样式,DOM2级增加了document.defaultView属性,并为该属性提供了getComputedStyle()方法。

语法:document.default.getComputedStyle(要取得样式的元素, 伪元素字符串)(伪元素字符串如:":after",若不需要伪元素信息,则该参数为null)

getComputedStyle()返回一个CSSStyleDeclaration对象,包含应用在当前元素的所有样式。

var div = document.getElementById("#myDiv");
var computedStyle = document.defaultView.getComputedSytle(div,null);

IE不支持getComputedStyle(),但它为每个支持style属性的元素指定了currentStyle属性,这个属性返回一个CSSStyleDeclaration对象。

var div = document.getElementById("#myDiv");
var computedStyle = div.currentStyle;
(二)操作样式表

可以用CSSStyleSheet类型来表示样式表,它包括元素包含的样式表和