摘要：筆記說明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時間開的一個專欄，每天分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入的專欄學(xué)習(xí)原文有的語音，如有侵權(quán)請聯(lián)系我，郵箱。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：kaimo313@foxmail.com。

CSSOM 是 CSS 的對象模型，在 W3C 標(biāo)準(zhǔn)中，它包含兩個部分：描述樣式表和規(guī)則等 CSS 的模型部分（CSSOM），和跟元素視圖相關(guān)的 View 部分（CSSOM View）。

用 style 標(biāo)簽和 link 標(biāo)簽創(chuàng)建樣式表

// 獲取文檔中所有的樣式表
document.styleSheets

// 雖然無法用 CSSOM API 來創(chuàng)建樣式表，但是可以修改樣式表中的內(nèi)容
document.styleSheets[0].insertRule("p { color:pink; }", 0)
document.styleSheets[0].removeRule(0)

// 獲取樣式表中特定的規(guī)則（Rule），(使用它的 cssRules 屬性來實現(xiàn))
document.styleSheets[0].cssRules

selectorText 和 style，分別表示一個規(guī)則的選擇器部分和樣式部分。

1、selector 部分：是一個字符串，按照選擇器語法設(shè)置即可。

2、style 部分：是一個樣式表，它跟元素的 style 屬性是一樣的類型，所以可以像修改內(nèi)聯(lián)樣式一樣，直接改變屬性修改規(guī)則中的具體 CSS 屬性定義，也可以使用 cssText 這樣的工具屬性。

// 獲取一個元素最終經(jīng)過 CSS 計算得到的屬性的方法
window.getComputedStyle(elt, pseudoElt);

CSSOM View 這一部分的 API，可以視為 DOM API 的擴(kuò)展，它在原本的 Element 接口上，添加了顯示相關(guān)的功能，可以分成三個部分：窗口部分，滾動部分和布局部分。

用于操作瀏覽器窗口的位置、尺寸等。

moveTo(x, y)：窗口移動到屏幕的特定坐標(biāo)

moveBy(x, y)：窗口移動特定距離

resizeTo(x, y)：改變窗口大小到特定尺寸

resizeBy(x, y)：改變窗口大小特定尺寸

// 窗口 API 還規(guī)定了 window.open() 的第三個參數(shù)：
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )

可視區(qū)域（視口）滾動行為由 window 對象上的一組 API 控制

scrollX：是視口的屬性，表示 X 方向上的當(dāng)前滾動距離，有別名 pageXOffset

scrollY：是視口的屬性，表示 Y 方向上的當(dāng)前滾動距離，有別名 pageYOffset

scroll(x, y)：使得頁面滾動到特定的位置，有別名 scrollTo，支持傳入配置型參數(shù) {top, left}

scrollBy(x, y)：使得頁面滾動特定的距離，支持傳入配置型參數(shù) {top, left}

通過這些屬性和方法，可以讀取視口的滾動位置和操縱視口滾動。

// 監(jiān)聽視口滾動事件，需要在 document 對象上綁定事件監(jiān)聽函數(shù)
document.addEventListener("scroll", function(event){
  //......
})

在 Element 類，為了支持滾動，加入了以下 API。

scrollTop：元素的屬性，表示 Y 方向上的當(dāng)前滾動距離。

scrollLeft：元素的屬性，表示 X 方向上的當(dāng)前滾動距離。

scrollWidth：元素的屬性，表示元素內(nèi)部的滾動內(nèi)容的寬度，一般來說會大于等于元素寬度。

scrollHeight：元素的屬性，表示元素內(nèi)部的滾動內(nèi)容的高度，一般來說會大于等于元素高度。

scroll(x, y)：使得元素滾動到特定的位置，有別名 scrollTo，支持傳入配置型參數(shù) {top, left}。

scrollBy(x, y)：使得元素滾動到特定的位置，支持傳入配置型參數(shù) {top, left}。

scrollIntoView(arg)：滾動元素所在的父元素，使得元素滾動到可見區(qū)域，可以通過 arg 來指定滾到中間、開始或者就近。

// 可滾動的元素也支持 scroll 事件，在元素上監(jiān)聽它的事件即可
element.addEventListener("scroll", function(event){
  //......
})

有些元素可能產(chǎn)生多個盒，事實上，只有盒有寬和高，元素是沒有的。

1、獲取寬高的對象應(yīng)該是盒

CSSOM View 為 Element 類添加了兩個方法：getClientRects()和getBoundingClientRect()。

getClientRects：會返回一個列表，里面包含元素對應(yīng)的每一個盒所占據(jù)的客戶端矩形區(qū)域，這里每一個矩形區(qū)域可以用 x, y, width, height 來獲取它的位置和尺寸。

getBoundingClientRect：返回元素對應(yīng)的所有盒的包裹的矩形區(qū)域，需要注意，這個 API 獲取的區(qū)域會包括當(dāng) overflow 為 visible 時的子元素區(qū)域。

最后面兩個API兼容性非常好，定義又非常清晰。實現(xiàn)視覺效果超級棒。。。

// 大家可以試一試在控制臺輸出下面3個
document.documentElement
// >>> ...

document.documentElement.getClientRects()
// >>> DOMRectList

document.documentElement.getBoundingClientRect()
// >>> DOMRect