概要

狹義的 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.clientWidth\element.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()
  會返回一個列表，裡面包含元素對應的每一個盒所占據的客戶端矩形區域.