6.客户端JavaScript笔记：DOM2、DOM3
本系列内容由ZouStrong整理收录
整理自《JavaScript权威指南（第六版）》，《JavaScript高级程序设计（第三版）》
DOM 1级主要定义的是 HTML 和 XML 文档的底层结构
DOM 2级和DOM 3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的 XML 特性
一. DOM 变化
DOM变化多涉及到命名空间的变化，暂略
二. 操作样式
DOM2级样式模块，提供了一套 API，可以方便的操作和访问元素的样式
1. 访问和设置元素的样式
所有HTML元素都有一个对应的style属性，这个对象包含了在style 特性中指定的任何CSS属性（使用短划线的 CSS 属性名，必须将其转换成驼峰大小写形式）
div.style.color;
div.style.backgroundImage;
div.style.display但有一个不能直接转换的 CSS 属性——float（float 是 JavaScript 中的保留字，因此不能用作属性名）
在标准浏览器中使用cssFloat，而IE支持的则是styleFloat
div.style.cssFloat;
div.style.styleFloat;设置值也很简单，只要为属性指定值即可
div.style.color="#F00";
div.style.backgroundColor="#F00";
div.style.display=""; //恢复元素默认显示更详尽的API
DOM2 级样式规范还为 style 对象定义了一些属性和方法，可以更加方便的操作元素的样式
- cssText属性：返回元素的style特性值的字符串形式（跟元素的getAttribute('style')返回的值类似（可能包含的空格不一样））
cssText属性也可用于设置元素的style特性值，并且可以一次性设置多个值，比起上面的单独设置来说，更加方便
以下属性和方法E8及以下不支持
- length属性：返回元素的style特性中有效的css属性的数量
- getPropertyValue(name)：返回给定css属性的值
- getPropertyPriority(name)：返回"important"或""（取决于该属性是否设置了!important）
- removeProperty(name) ：从样式中删除给定属性
- setProperty(name,value,priority) ：将给定属性设置为相应的值，并加上优先权标志（ "important" 或者一个空字符串）
- item( index) ：返回给定位置的 CSS 属性的名称（可以使用方括号语法代替，通常和length属性配合使用，以便迭代在元素中定义的 CSS 属性名，在 getPropertyValue() 中使用取得的属性名进一步取得属性值）
- parentRule：表示 CSS 信息的 CSSRule 对象
- getPropertyCSSValue( propertyName) ：返回包含给定属性值的 CSSValue 对象
计算的样式（只读的）
style对象只能访问和操作行内样式
DOM2级样式增强了 document.defaultView，提供了
getComputedStyle()方法，返回CSSStyleDeclaration对象（与 style对象的类型相同），但包含的是应用在元素上的最终样式（计算样式），而不仅仅是行内样式
- 第一个参数，必须，要取得样式的元素
- 第二个参数，必须，一个伪元素字符串或null
所有计算的样式都是只读的；不能修改计算后样式对象中的CSS属性。此外，计算后的样式也包浏览器默认样式信息，因此任何具有默认值的 CSS 属性都会表现在计算后的样式中
2. 操作样式表
CSSStyleSheet 类型表示的是样式表，包括通过link元素包含的样式表和在style元素中定义的样式表（这两个元素本身分别是由 HTMLLinkElement 和 HTMLStyleElement 类型表示）
很少用到，因此暂不涉及
3. 元素大小
元素大小相关的属性和方法并不属于DOM2 级样式规范，但却与元素的样式息息相关（IE率先引入了一些属性，目前，所有浏览器都已经支持这些属性）
偏移量
偏移量，包括元素在屏幕上占用的所有可见的空间（由其高度、宽度、内边距、滚动条和边框构成，不包括外边距）
- offsetHeight：返回元素在垂直方向上可见空间的大小（纯数字）
- offsetWidth：返回元素在水平方向上可见空间的大小（纯数字）
- offsetLeft：元素的左外边框至“包含元素”的左内边框之间的像素距离（纯数字）
- offsetTop：元素的上外边框至“包含元素”的上内边框之间的像素距离（纯数字）
- offsetParent：返回元素的“包含元素”（不同于parentNode）
这里的包含元素，指的是设置了position属性值（static除外）的最近的祖先元素，如果都没有设置，则是body元素
有一个例外，无论如何，表格元素的offsetParent都是table元素
因此，要想知道元素在页面上的偏移量，可以迭代元素的offsetParent，并累加offsetLeft 和 offsetTop，如此循环直至根元素
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}对于基本的 CSS 布局的页面，可以得到非常精确的结果。对于使用表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，因此得到的值就不太精确了
所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能
客户区大小
元素的客户区大小，指的是元素内容及其内边距所占据的空间大小
- clientWidth：元素内容区宽度和左右内边距宽度
- clientHeight：元素内容区高度和上下内边距高度
这个跟offsetWidth和offsetHeight就不一样了，除了包含的内容（高度、宽度、内边距、滚动条和边框）不一样之外
对于offset系的来说，有无滚动条不影响计算结果，但是对于client系的来说，出现滚动条就意味着值的减小
这两个属性最常用的场景就是：确定浏览器视口大小
//标准模式
document.documentElement.clientWidth
document.documentElement.clientHeight
//兼容模式
document.body.clientWidth,
document.body.clientHeight滚动大小
滚动大小，指的是包含滚动内容的元素的大小
有些元素（例如html元素），即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过 CSS 的overflow 属性进行设置才能滚动
- scrollHeight：在没有滚动条的情况下（自由伸展），元素内容的总高度
- scrollWidth：在没有滚动条的情况下（自由伸展），元素内容的总宽度
- scrollLeft：被隐藏在内容区域左侧的像素数（可读可写的）
- scrollTop：被隐藏在内容区域上方的像素数（可读可写的）
带有垂直滚动条的页面总高度就是
document.documentElement.scrollHeight在确定文档的总高度时（包括基于视口的最小高度时），必须取得 scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);注意，对于运行在混杂模式下的 IE，则需要用 document.body 代替 document.documentElement
scrollLeft和scrollTop是可读可写的，因此常检测元素是否位于顶部，如果不是就将其回滚到顶部
if (element.scrollTop != 0){
element.scrollTop = 0;
}确定元素大小
元素的getBoundingClientRect() 方法。这个方法返回会一个矩形对象，包含 4 个属性： left、 top、 right 和 bottom。这些属性给出了元素在页面中相对于浏览器窗口的位置
IE8 及更早版本认为文档的左上角坐标是(2, 2)，而其他浏览器则将传统的(0,0)作为起点坐标
三. 遍历
...
四. 范围
...