JavaScript-DOM2和DOM3

DOM2 和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM 的某个非常具体的子集。这些模块如下

• DOM2 级核心（DOM Level 2 Core）：在1 级核心基础上构建，为节点添加了更多方法和属性。

• DOM2 级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图。

• DOM2 级事件（DOM Level 2 Events）：说明了如何使用事件与DOM文档交互。

• DOM2 级样式（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS 样式信息。

• DOM2 级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM 文档和选择其特定部分的新接口。

• DOM2 级 HTML（DOM Level 2 HTML）：在1 级HTML 基础上构建，添加了更多属性、方法和新接口

DOM变化

    DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。从某种意义上讲，实现这一目的很大程度意味着对命名空间的支持。“DOM2级核心”没有引入新类型，它只是在DOM1级的基础上通过新增新方法和新属性来增强了既有类型。“DOM3级核心”同样增强了既有类型，但也引入了一些新类型。

    有了XML命名空间，不同XML文档的元素就可以混合在一起，共同构成格式良好的文档，而不必担心发生命名冲突。从技术上讲，HMTL不支持XML命名空间，但XHTML支持XML命名空间。命名空间要使用xmlns特性来指定。在DOM2级中，Node类型、Document类型、Element类型和NamedNodeMap类型发生了一些变化，新增了一些与命名空间相关的属性或方法。

    DOM的其他部分在“DOM2级核心”中也发生了一些变化。这些变化与XML命名空间无关，而是更倾向于确保API的可靠性及完整性。如：DocumentType类型、Document类型、Node类型和框架都新增了一些与命名空间无关的属性或方法。、

样式

    在 HTML 中定义样式的方式有3 种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用style 特性定义针对特定元素的样式。“DOM2 级样式”模块围绕这3 种应用样式的机制提供了一套API。要确定浏览器是否支持DOM2 级定义的CSS 能力，可以使用下列代码：

  var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");

  var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

   

    访问元素的样式

    任何支持 style 特性的HTML 元素在JavaScript 中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。如：document.getElementById('myDiv').style.fontFamily（对于使用短划线表示的样式font-family用了驼峰表示形式fontFamily）。但有一个不能直接转换的CSS属性就是float。因为float是JavaScript的保留字，可以用CSSFloat表示，而IE支持的是styleFloat。

    “DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时，也可以修改样式。具体如下:

• cssText：通过它能够访问和设置style 特性中的CSS代码.支持IE6+,chrome,firfox.

• length：应用给元素的CSS 属性的数量。支持IE9+,chrome,firfox.

• parentRule：表示CSS 信息的CSSRule 对象,后面将讨论CSSRule 类型。

• getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回"important"；否则，返回空字符串。支持IE9+,chrome,firfox.

• getPropertyValue(propertyName)：返回给定属性的字符串值。支持IE9+、Safari,Chrome,firfox

• item(index)：返回给定位置的CSS 属性的名称。支持IE9+、Safari,Chrome,firfox

• removeProperty(propertyName)：从样式中删除给定属性。支持IE9+、Safari,Chrome,firfox

• setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。支持IE9+、Safari,Chrome,firfox

    为了包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接收两个参数：要取得样式的元素和一个伪元素字符串（例如“：after”）。如果不需要伪元素信息，第二个参数可以是null。该方法返回一个CSSStyelDeclaration对象（与style属性的类型相同），其中包含当前元素的所有计算的样式。IE不支持这个方法，但它有一种类似的概念。在IE中，每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyelDeclaration的实例，包含当前元素全部计算后的样式。无论在哪个浏览器中，最重要的一条是要记住所有计算的样式都是只读的；不能修改计算后样式对象中的CSS属性。

    操作样式表

    CSSStyleSheet 类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表,使用下面的代码可以确定浏览器是否支持DOM2 级样式表:

var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets", "2.0");

    CSSStyleSheet 继承自StyleSheet，后者可以作为一个基础接口来定义非CSS 样式表。从StyleSheet 接口继承而来的属性如下:

• disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表。

• href：如果样式表是通过<link>包含的，则是样式表的URL；否则，是null。

• media：当前样式表支持的所有媒体类型的集合。与所有DOM 集合一样，这个集合也有一个length 属性和一个item()方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。在IE 中，media 是一个反映<link>和<style>元素media特性值的字符串。

• ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML 中通过<link>或<style/>引入的（在XML 中可能是通过处理指令引入的）。如果当前样式表是其他样式表通过@import导入的，则这个属性值为null。IE 不支持这个属性。

• parentStyleSheet：在当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针。

• title：ownerNode 中title 属性的值。

• type：表示样式表类型的字符串。对CSS 样式表而言，这个字符串是"type/css"。

除了 disabled 属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上，CSSStyleSheet 类型还支持下列属性和方法：

• cssRules：样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个类似的rules 属性。

• ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为null。IE 不支持这个属性。

• deleteRule(index)：删除cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持一个类似的removeRule()方法。

• insertRule(rule,index)：向cssRules 集合中指定的位置插入rule 字符串。IE 不支持这个方法，但支持一个类似的addRule()方法。

    应用于文档的所有样式表是通过 document.styleSheets 集合来表示的。也可以直接通过<link>或<style>元素取得CSSStyleSheet 对象。DOM 规定了一个包含CSSStyleSheet 对象的属性，名叫sheet；除了IE，其他浏览器都支持这个属性。IE 支持的是styleSheet属性。

    CSS规则：CSSRule对象表示样式表中的每一条规则。实际上，CSSRule是一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息。

    创建规则：DOM规定，要向现有样式表中添加新规则，需要使用insertRule()方法。这个方法接收两个参数：规则文本和表示在哪里插入规则的索引。IE8及更早版本支持一个类似的方法，名叫addRule()，也接收两必选参数：选择符文本和CSS样式信息；一个可选参数：插入规则的位置。

    删除规则：从样式表中删除规则的方法是deleteRule()，这个方法接受一个参数：要删除的规则的位置。IE支持的类似方法叫removeRule()，使用方法相同。

    元素大小

    偏移量：包括元素在屏幕上占用的所有可见空间。元素的可见大小由高度、宽度决定，包括所有的内边距。滚动条和边框大小。通过下列4个属性可以取得元素的偏移量：

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

• offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

• offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

• offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

    其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性。

    客户区大小：指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth 和clientHeight。其中，clientWidth 属性是元素内容区宽度加上左右内边距宽度；clientHeight 属性是元素内容区高度加上上下内边距高度。与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的。

    滚动大小：指的是包含滚动内容的元素的大小。有4个相关属性：

• scrollHeight：在没有滚动条的情况下，元素内容的总高度。

• scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

• scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

• scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

    

    确定元素大小：IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 为每个元素都提供了一个getBoundingClientRect()方法。这个方法返回会一个矩形对象，包含4 个属性：left、top、right 和bottom。这些属性给出了元素在页面中相对于视口的位置。但是，浏览器的实现稍有不同。IE8 及更早版本认为文档的左上角坐标是(2, 2)，而其他浏览器包括IE9 则将传统的(0,0)作为起点坐标。因此，就需要在一开始检查一下位于(0,0)处的元素的位置，在IE8 及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0).

遍历

    DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM 结构的类型：NodeIterator
和TreeWalker。这两个类型能够基于给定的起点对DOM 结构执行深度优先（depth-first）的遍历操作。
在与DOM 兼容的浏览器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome
0.2 及更高版本），都可以访问到这些类型的对象。IE 不支持DOM 遍历。使用下列代码可以检测浏览器
对DOM2 级遍历能力的支持情况。（任何节点都可以作为遍历的根节点）

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");

var supportsNodeIterator = (typeof document.createNodeIterator == "function");

var supportsTreeWalker = (typeof document.createTreeWalker == "function");

    NodeIterator

    可以使用document.createNodeIterator()方法创建它的新实例。这个方法接收4个参数。root：想要作为搜索起点的树中的节点；whatToShow：表示要访问那些节点的数字代码；filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数；entityReferenceExpansion：布尔值，表示是否要扩展实体引用，这个参数在HTML页面中没有用，因为其中的实体应用不能扩展。

    whatToShow参数是一个位掩码，通过应用一或多个过滤器（filter）来确定要访问哪些节点。这个参数的值以常量形式在NodeFilter类型中定义，如：NodeFilter.SHOW_ELEMENT：显示元素节点。

    NodeIterator类型的两个主要方法是nextNode()和previousNode()。前者用于向前前进一步，后者用于向后后退一步。

    TreeWalker

    可以使用document.createTreeWalker()方法创建它的新实例。这个方法接收的4个参数与document.createNodeIterator()方法相同。该类型比NodeIterator类型要多一些跟好用的方法，为遍历提供了方便。该类型还有一个属性，叫currentNode，表示任何遍历方法在上一次遍历中返回的节点。通过设置这个属性也可以修改遍历继续进行的起点。

    与NodeIterator相比，该类型在遍历DOM时拥有更大的灵活性。由于IE中没有对应的类型和方法，所以使用遍历的跨浏览器解决方案非常少见。

范围

    为了让开发人员更方便地控制页面，“DOM2 级遍历和范围”模块定义了“范围”（range）接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。在常规的DOM 操作不能更有效地修改文档时，使用范围往往可以达到目的。Firefox、Opera、Safari 和Chrome 都支持DOM 范围。IE 以专有方式实现了自己的范围特性。