DOM2与DOM3的特性

DOM 2 和 DOM 3 在之前提过，是一系列各种功能的模块用于增强DOM，可以通过测试函数document.implementation.hasFeature()来测试浏览器是否支持DOM 2 和 3。 DOM2 和 DOM3的特性主要集中在对样式的方便访问，更强的遍历功能与自定义遍历器，范围控制等几个要素。

样式

为了改变页面的效果，对HTML元素的样式操作非常频繁。DOM2级样式提供了一系列便捷的API用于直接操作一个元素节点的样式。

操作style对象

所有支持style的HTML元素都有.style属性，这个属性返回一个对象，包含所有CSS属性的键值对。这个对象就像JS对象一样可以继续用.attrName来访问具体值。如果CSS元素有减号连接，则要转换成驼峰形式。特别的是针对float属性要用.cssFLoat 除了CSS属性名之外，style取得的CSS对象还有一些方法和属性：

**style的属性和方法**
属性或方法	解释
.cssText	获得全部的CSS代码，如果重新设置的话，会覆盖原来的所有CSS代码
.length	CSS属性的数量
.parentRule	CSS信息的CSSRule对象
.getPropertyValue(attrName)	参数是CSS属性名，用于获得对应的属性值。这里的参数是CSS原始的属性名称，不是驼峰
.getPropertyPriority(attrName)	如果样式用了!important设置，则返回"!important"，否则返回空字符串。
.item(index)	返回给定索引位置的CSS属性名。
.removeProperty(attrName)	删除某个CSS属性
.setProperty(attrName, value, important)	设置CSS属性，最后一个参数如果强制生效，就传入"!important",否则传入空字符串。

.style属性是返回的是在标签里写的内联样式的CSS对象集合，对于在样式表内定义的样式和经过层叠之后的样式，用.style属性是拿不到的，因为这是浏览器经过计算后呈现的效果。如果想要拿到计算后的CSS样式值。需要用特殊的方法： document.defaultView.getComputedStyle('element',伪类或空字符串) 第二个参数可以是一个伪类字符串，如果不需要伪类，可以传一个空字符串。这个参数的结果是只读的，不可设置。

恢复默认值

如果在CSS中定义了对应的样式，通过JS修改了样式，那么将属性赋予一个空字符串表示是恢复默认效果，而不是将其值设置为空。可以理解为JS是最靠近用户的一层，修改的样式最优先，当JS的样式被设置为空的时候，就按照原来的CSS文件展现样式。

操作stylesheet样式表对象

在之前的操作.style属性只是内联样式，在HTML页面中，样式表是在head标签的link标签内定义的，DOM 2级为样式表准备了一个API是document.styleSheets 这个属性返回一个StyleSheetList，里边包含了所有作用于该页面的样式表，其中的head标签内的一个Link标签算一个，head内部的一对style标签也算一个。需要操作某一个样式表，可以用方括号索引或者.item(index)取出想要操作的CSSStyleSheet样式表对象，对于样式表对象有共通的方法和属性：

**CSSStyleSheet的属性和方法**
属性或方法	解释
.disabled	表示样式是否被禁用，设置为true表示禁用
.href	如果这个样式表是通过外链而来，这个返回URL地址。否则是null
.media	当前样式表支持的所有媒体类型的集合
.parentStyleSheet	如果当前样式表是通过@import导入的，就返回导入它的样式表，否则返回null
.ownerNode	返回拥有当前样式表的节点，比如通过link标签引入的样式表就返回link标签。
.title	ownerNode中title属性的值。
.type	表示样式表类型的字符串，对CSS样式表而言是type/css

除了.disable属性之外，这些属性都是只读的。对于相关的CSSRule对象，如果需要再深入研究。

遍历

DOM 2级定义了两个类型：NodeIterator 和 TreeWalker，用于对给定的起点进行深度优先的遍历操作。

NodeIterator

NodeIterator是一个类，需要用document.createNodeIterator(root,whatToShow,filter,boolean)来生成一个实例然后对实例进行操作。第一个参数表示起点，是一个节点对象；第二个参数表示过滤器的代码，用于确定哪些节点要访问；第三个参数是自定义的对象，必须有一个.acceptNode()方法，返回布尔值，以确定接受还是拒绝这个节点，第四个参数在HTML里无用。生成一个实例之后，就是一个自定义的迭代器，然后用nextNode()和previousNode()来前进后后退，所谓前进就是下一个节点，后退就是上一个节点，方法返回节点对象。

TreeWalker

这个也是一个类，需要用document.createTreeWalker()来建立实例，四个参数与NodeIterator完全相同。这两个遍历器比较灵活，遇到的时候可以再深度研究。

范围

所谓范围，就是可以选择文档的一个部分，不必考虑节点的界限。方便对某一部分进行操作。要创建一个范围，需要用document.createRange()来创建一个范围实例。这个范围有很多属性和方法，但是在创建的时候这个范围不包括任何文档内容，这些属性和方法也没有生效。需要在文档中使用范围对象的.selectNode(node) 和 .selectNodeContent(node)方法来选择一个节点来设置范围。第一个方法是将参数节点及其全部内容和后代纳入范围内，第二个方法是只将参数节点的子节点纳入范围内。范围的部分在遇到的时候也可以再看。

前端开发 JS 09 DOM 2 和 DOM 3