DOM2 和 DOM3

DOM1级主要定义的是HTML文档的底层结构.DOM2 和 DOM3级则在这个结构的基础上引入了更多的交互能力.为此,DOM2 和 DOM3级分为许多模块(模块之间具有某种关联),分别描述了DOM的某个非常具体的子集,这些模块为:

12.0.png

DOM2级和3级的目的在于扩展DOM API,同时提供更好的错误处理及特性检测能力.”DOM2级核心”没有引入新类型,它只是在DOM1级的基础上通过增加新方法和新属性来增强了既有类型.”DOM3级核心”同样增强了既有类型,但也引入了一些新类型.
下文只是介绍DOM2和DOM3的样式,遍历和范围模块部分的一些有用的扩展(下一部分会介绍事件),其余部分参考官方文档.

12.1 样式

12.1.1 访问元素的样式

12.2.11.png
12.2.12.png

注意,因为以上都是style对象的方法,操作的全都是为元素设置的style属性里写的CSS样式内容,而且有少数的方法浏览器的兼容性不好,在使用时一定要考虑这些问题.
12.2.13.png

12.1.2 操作样式表

12.2.21.png
12.2.22.png
12.2.23.png
12.2.24.png

12.1.3 元素大小

12.2.31.png
12.2.32.png
12.2.33.png

注意,所有这些偏移量属性都是只读的,而且每次访问它们都需要重新计算.因此,应该尽量避免重复访问这些属性.如果需要重复使用其中某些属性的值,可以将它们保存在局部变量中,以提高性能.
12.2.34.png

12.2.35.png

注意,这几个属性在不同的浏览器中返回的值很可能会不同.
scrollTop 和 scrollLeft属性都是可以设置的,比如可以这样写一个函数用于检测元素是否位于顶部,如果不是就将其滚回到顶部:

function scrollToTop(element) {
	if (element.scrollTop != 0) {
		element.scrollTop = 0;
	}
}

但是,还是要记住这些属性在不同浏览器中返回的值不同,所以使用时要格外注意.

4. 确定元素大小
各浏览器还提供了一个getBoundingClientRect()方法.这个方法返回一个对象,对象中可能有多个属性:left, top, right, bottom, width, height(现在firefox还有x和y),在不同的浏览器中的支持也不同,使用时,需要在各浏览器上进行测试.

12.2 遍历

“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型: NodeIterator 和 TreeWalker.这两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作.
12.31.png
12.32.png

12.2.1 NodeIterator

12.3.11.png
12.3.12.png
12.3.13.png
12.3.14.png
12.3.15.png

12.2.2 TreeWalker

12.3.21.png

创建TreeWalker对象要使用document.createTreeWalker()方法,它接受的四个参数和document.createNodeIterator()方法相同. 而它和NodeIterator主要的区别在于:

第三个参数filter可以返回的值更多.
能够在DOM结构中沿任何方向移动.
有一个currentNode属性,表示在最近一次遍历中返回的节点,使用它还可以随时修改遍历继续进行的起点.

总而言之,与NodeIterator想比,TreeWalker类型在遍历DOM时拥有更大的灵活性,但由于IE似乎在9+版本才支持这两个对象,所以暂时使用得还不太多.

12.3 范围

12.41.png

12.3.1 DOM中的范围

12.4.11.png
12.4.12.png
12.4.13.png
12.4.14.png
12.4.15.png
12.4.16.png
12.4.17.png
12.4.18.png
12.4.19.png
12.4.20.png
12.4.21.png
12.4.22.png
12.4.23.png