javascript学习笔记七
1.DOM样式属性和方法
“DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同事，也可以修改样式。
通过cssText属性可以访问style特性中的CSS代码。在读取模式下，cssText返回浏览器对style特性中CSS代码的内部表示。在写入模式下，赋给cssText的值会重写整个style特性的值；也就是说，以前通过style特性指定的样式信息都将丢失。
?????? 要从元素的样式中移除某个CSS属性，需要使用removeProperty()方法。使用这个方法移除一个属性，意味着将会为该属性应用默认的样式（从其他样式表经层叠而来）。
?????? 2.计算的样式
?????? 虽然style对象能够提供支持style特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。
12.2.2 操作样式表?????? CSSStyleSheet类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。这两个元素本身粉笔是由HTMLLineElement和HTMLStyleElement类型表示的。
?????? 1.CSS规则
?????? CSSRule对象表示样式表中的每一条规则。实际上，CSSRule是一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息（其他规则还有@import、@font-face、@page和@charset，但是这些规则很少有必要通过脚本来访问）。
?????? 2.创建规则
?????? DOM规定，要向现有的样式表中添加新规则，需要使用insertRule方法。这个方法接受两个参数：规则文本和表示在哪里插入规则的索引。
?????? 3.删除规则
?????? 从样式表中删除规则的方法是deleteRule()，这个方法接受一个参数：要删除的规则的位置。
12.2.3 元素大小?????? DOM中没有规定如何确定页面中元素的大小。IE为此率先引入了一些属性，以便开发人员使用。目前，所有主要的浏览器都已经支持这些属性。
?????? 1.偏移量
?????? 通过以下4个属性可以取得元素的偏移量。
?????? （1）offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
?????? （2）offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
?????? （3）offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
?????? （4）offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
?????? 注意：所有这些偏移量的属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中的某些属性的值，可以将它们保存在局部变量中，以提高性能。
?????? 2.客户区大小
?????? 元素的客户区大小（clientdimension），指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。其中clientWidth在属性是元素内容区宽度加上左右内边距的宽度；clientHeight属性是元素内容区高度加上上下内边距的高度。
?????? 3.滚动大小
?????? 滚动大小（scrolldimension），指的是包含滚动内容的元素的大小。
?????? 以下是4个与滚动大小相关的属性。
?????? （1）scrollHeight：在没有滚动条的情况下，元素内容的总高度。
?????? （2）scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
?????? （3）scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
?????? （4）scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
?????? 4.确定元素的大小
?????? IE、Firefox3+、Safari4+、Opera9.5及Chrome为每个元素都提供一个getBoundingClientRect()方法。这个方法返回一个矩形对象，包含4个属性：left、top、right和bottom。这个属性给出了元素在页面中相对于视口的位置。
?
12.3 遍历?????? “DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先（depth-first）的遍历操作。
12.3.1 NodeIterator?????? NodeIterator类型是两者中比较简单的一个，可以使用document.createNodeIterator()方法创建它的新实例。这个方法接受下列4个参数。
?????? （1）root：想要作为搜索起点的树中的节点。
?????? （2）whatToShow：表示要访问哪些节点的数字代码。
?????? （3）filter:是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数。
?????? （4）entityReferenceExpansion：布尔值，表示是否要扩展实体引用。这个参数在HTML页面中没有用，因为其中的实体引用不能扩展。
?????? NodeIterator类型的两个主要方法是nextNode()和previousNode()。顾名思义，在深度优先的DOM子树遍历中，nextNode()方法用于向前前进一步，而previousNode()用于向后后退一步。
12.3.2 TreeWalker?????? TreeWalker是NodeIterator的一个更高级的版本。除了包括nextNode()和previousNode()在内的相同的功能之外，这个类型还提供了下列用于在不同方向上遍历DOM结构的方法，
?????? （1）parentNode()：遍历到当前节点的父节点。
?????? （2）firstChild()：遍历到当前节点的第一个子节点。
?????? （3）lastChild()：遍历到当前节点的最后一个节点。
?????? （4）nextSibling()：遍历到当前节点的下一个同辈节点。
?????? （5）previousSibling()：遍历到当前节点的上一个同辈节点。
12.4 范围?????? 为了让开发人员更方便第控制页面，“DOM2级遍历和范围”模块定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。
12.4.1 DOM中的范围?????? DOM2级在Document类型中定义了createRange()方法。在兼容DOM的浏览器中，这个方法属于document对象。使用hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。
12.4.2 IE8及更早版本中的范围?????? 虽然IE9支持DOM范围，但IE8及之前版本不支持DOM范围。不过，IE8及早期版本支持一种类似的概念，即文本范围（text range）。文本范围是IE专有的特性，其他浏览器都不支持。顾名思义，文本范围处理的主要是文本（不一定是DOM节点）。通过<body>、<button>、<input>、和<textarea>等这几个元素，可以调用createTextRange()方法来创建文本范围。
12.5 小结