[TOC] ## 9.4 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。 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 基础上构建，添加了更多属性、方法和新接口 ### 9.4.1 样式 在 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"); ~~~ **1. 访问元素的样式** 任何支持 style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。 访问和设置元素的css属性可以这样操作: ~~~ var div = document.getElementById('myDiv'); console.log(div.style.color); //获取color值 div.style.color = 'red'; //设置color值 div.style.fontSize = '20px';//设置font-size的值(这里会将有短横线的值转化为驼峰命名来获取或设置) ~~~ 特例：由于float是保留关键字,所以通过cssFloat来访问和设置,而IE中则通过styleFloat来设置或访问. 元素的style对象除了有css的样式属性外,也包含了自己的一些属性和方法,具体如下: ||| |---|---| |cssText|通过它能够访问和设置style 特性中的CSS代码。| |length|应用给元素的CSS 属性的数量。| |parentRule|表示CSS 信息的CSSRule 对象,后面将讨论CSSRule 类型。| |getPropertyPriority(propertyName)|如果给定的属性使用了!important 设置，则返回"important"；否则，返回空字符串。| |getPropertyValue(propertyName) | 返回给定属性的字符串值。支持IE9+、Safari,Chrome,firfox | |item(index)|返回给定位置的CSS 属性的名称。 | |removeProperty(propertyName)|从样式中删除给定属性。 | |setProperty(propertyName,value,priority)|将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。 | ~~~ //设置style对象的cssText属性 myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; alert(myDiv.style.cssText); ~~~ DOM2样式增强了document.defaultView，提供了`getComputedStyle()方法`。接受两个参数：要去的计算样式的元素和一个伪元素字符串（如“：after”）。返回一个CSSSstyleDeclaration对象，其中包含当前元素的所有计算的样式。 **2. 操作样式表** 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属性。 **3. 元素大小** （1）偏移量 指包括元素在屏幕上占用的所有可见的空间。 元素的可见大小由高度、宽度决定，包括所有内边距、滚动条和边框大小（不包括外边距） ||| |---|---| | offsetHeight| 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。| | offsetWidth| 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。| | offsetLeft| 元素的左外边框至包含元素的左内边框之间的像素距离。| | offsetTop| 元素的上外边框至包含元素的上内边框之间的像素距离。| （2）客户区大小 指元素内容及其内边距所占据的空间大小。 有关客户区大小的属性有两个： ||| |---|---| | clientWidth| 元素内容区宽度加上左右内边距宽度。| | clientHeight| 元素内容区高度加上上下内边距高度。| （3）滚动大小 指包含滚动内容的元素的大小。 ||| |---|---| | scrollHeight| 在没有滚动条的情况下，元素内容的总高度。| | scrollWidth| 在没有滚动条的情况下，元素内容的总宽度。| | scrollLeft| 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。| | scrollTop| 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。| （4）确定元素大小 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)。 ### 9.4.3 遍历 DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM 结构的类型：`NodeIterator和TreeWalker`。这两个类型能够基于给定的起点对DOM 结构执行深度优先（depth-first）的遍历操作。在与DOM 兼容的浏览器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome0.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是一个简单的接口，只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时，还支持在DOM结构的各个方向上移动，包括父节点、同辈节点和子节点等方向。** ### 9.4.4 范围 为了让开发人员更方便地控制页面，“DOM2 级遍历和范围”模块定义了“范围”（range）接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。在常规的DOM 操作不能更有效地修改文档时，使用范围往往可以达到目的。Firefox、Opera、Safari 和Chrome 都支持DOM 范围。IE 以专有方式实现了自己的范围特性。 * 范围是选择DOM结构中特定部分，然后再执行相应操作的一种手段。 * 使用范围选取可以在删除文档中某些部分的同事，包吃文档结构的格式良好，或者复制文档中的相应部分。