概要
狭义的 DOM API 仅仅包含 DOM 树形结构相关的内容。
DOM 中的所有的属性都是用来表现语义的属性，CSSOM 的则都是表现的属性。
CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：
- 描述样式表和规则等 CSS 的模型部分（CSSOM）
- 跟元素视图相关的 View 部分（CSSOM View）。
CSSOM
在实际使用中，CSSOM View 比 CSSOM 更常用一些，因为我们很少需要用代码去动态地管理样式表。
CSSOM View
1、窗体API
- moveTo(x, y) 窗口移动到屏幕的特定坐标；
- moveBy(x, y) 窗口移动特定距离；
- resizeTo(x, y) 改变窗口大小到特定尺寸；
- resizeBy(x, y) 改变窗口大小特定尺寸。
- window.open(uri,target,size) 第三个参数描述窗口的尺寸信息
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )
ps: 出于安全考虑，一些浏览器没有实现。
2、滚动API
视口滚动
在window对象上的，是顶层容器滚动提供的API，大部分移动端浏览器会对这部分api做性能优化。它和元素滚动API不同。
-
scrollX 属性，X方向上当前滚动的距离。
-
scrollY 属性，Y方向上当前滚动的距离。
-
scroll(x,y)方法，使得页滚动到指定位置。别名scrollTo，
-
scrollBy(x,y)方法，使页面滚动指定距离。
要监听视口滚动事件，我们需要在document对象上绑定scroll事件监听函数。
document.addEventListener("scroll",function(event){
//......
});
元素滚动
在Element类，为了支持滚动，加入了以下API。
- scrollTop 属性，表示Y方向上的当前滚动的距离。
- scrollLeft 属性，表示X方向上的当前滚动的距离。
- scrollWidth 属性，元素滚动内容的宽度，一般>=元素宽度。
- scrollHeight 属性，元素滚动内容的高度，一般>=元素高度。
- scroll(x,y) 方法，使元素滚动到指定位置，别名scrollTo
- scrollBy(x,y) 方法，使元素滚动指定距离。
元素也支持scroll事件
element.addEventListener("scroll", function(event){
//......
})
3、布局API
全局尺寸信息
- window.innerHeight 视口的高
- window.innerWidth 视口的宽
- window.devicePixelRatio 像素比（DPR），物理像素和css像素单位的倍率关系。
- window.screen
window.screen.width, window.screen.height 设备的屏幕尺寸。
获取Element对象的尺寸信息。
- element.clientWidthelement.clientHeight
属性表示元素的内部宽度高度，以像素计。该属性包括内边距，但不包括滚动条（如果有）、边框和外边距。
该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。
- element.getBoundingClientRect()
返回一个ClientRectd对象包含以下属性。
bottom float Y 轴，相对于视口原点（viewport origin）矩形盒子的底部。只读。
height float 矩形盒子的高度（等同于 bottom 减 top）。只读。
left float X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。只读。
right float X 轴，相对于视口原点（viewport origin）矩形盒子的右侧。只读。
top float Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。只读。
width float 矩形盒子的宽度（等同于 right 减 left）。只读。
x float X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。只读。
y float Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。只读。
- getClientRects()
会返回一个列表，里面包含元素对应的每一个盒所占据的客户端矩形区域.