本章内容
- 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 元素大小
- 偏移量
- 客户区大小
- 滚动大小
- 确定元素大小
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();
- 用 DOM 范围实现简单选择
var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');
range1.selectNode(p1);
range2.selectNodeContents(p1);
-
用 DOM 范围实现复杂选择
-
操作 DOM 范围中的内容
-
插入 DOM 范围中的内容
-
折叠 DOM 范围
-
比较 DOM 范围
-
复制 DOM 范围
-
清理 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 遍历。
网友评论