12 DOM2 和 DOM3

本章内容

• DOM2 和 DOM3 的变化
• 操作样式的 DOM API
• DOM 遍历与范围

12.1 DOM 变化

DOM2 级和 3 级的目的在于扩展 DOM API，以满足操作 XML 的所有需求，同时提供更好的错误处理及特性检测能力。
可以通过下列代码来确定浏览器是否支持这些 DOM 模块。

var supportsDOM3Core = document.implementation.hasFeature('Core', '3.0');
var supportsDOM2HTML = document.implementation.hasFeature('HTML', '2.0');
var supportsDOM2Views = document.implementation.hasFeature('Views', '2.0');
var supportsDOM2XML = document.implementation.hasFeature('XML','2.0');

12.1.1 针对 XML 命名空间的变化

12.2.2 其他方面的变化

12.2 样式

12.2.1 访问元素的样式

任何支持style特性的 HTML 元素在 JavaScript 中都有一个对应的style属性。对于使用短划线的 CSS 属性，必须将其转换成驼峰大小写形式，才能通过JavaScript来访问。

12.2.2 操作样式表

CSSStyleSheet类型表示的是样式表，包括通过<link>元素包含的样式表和<style>元素中定义的样式表。继承自StyleSheet。

12.2.3 元素大小

1. 偏移量
2. 客户区大小
3. 滚动大小
4. 确定元素大小

12.3 遍历

12.3.1 NodeIterator

12.3.4 TreeWalker

12.4 范围

12.4.1 DOM 中的范围

var supportsRange = document.implementation.hasFeature('Range', '2.0');

var range = document.createRange();

1. 用 DOM 范围实现简单选择

var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');
range1.selectNode(p1);
range2.selectNodeContents(p1);

2. 用 DOM 范围实现复杂选择

3. 操作 DOM 范围中的内容

4. 插入 DOM 范围中的内容

5. 折叠 DOM 范围

6. 比较 DOM 范围

7. 复制 DOM 范围

8. 清理 DOM 范围

12.4.2 IE8 及更早版本中的范围

12.5 小结

“DOM2 级样式”模块主要针对操作元素的样式信息而开发，其特性简要总结如下。

• 每个元素都有一个关联的style对象，可以用来确定和修改行内的样式。
• 要确定某个元素的计算样式，可以使用getComputedStyle()方法。
• IE 不支持getComputedStyle()方法，但为所有元素都提供了能够返回相同信息currentStyle属性。
• 可以通过document.styleSheets集合访问样式表。
• 除 IE 之外的所有浏览器都支持针对样式表的这个接口，IE 也为几乎所有相应的 DOM 功能提供了自己的一套属性和方法。

“DOM2 级遍历和范围”模块提供了与 DOM 结构交互的不同方式，简要总结如下。

• 遍历即使用NodeIterator或TreeWalker对 DOM 执行深度优先的遍历。
• NodeIterator是一个简单的接口，只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时，还支持在 DOM 结构的各个方向上移动，包括父节点、同辈节点和子节点等方向。
• 范围是选择 DOM 结构中特定部分，然后再执行相应操作的一种手段。
• 使用范围选区可以在删除文档中某些部分的同时，保持文档结构的格式良好，或者复制文档中的相应部分。
• IE8 及更早版本不支持“DOM2 级遍历和范围”模块，但它提供了一个专有的文本范围对象，可以用来完成简单的基于文本的范围操作。IE9 完全支持 DOM 遍历。