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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在 Element 類，為了支持滾動(dòng)，加入了以下 API。

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

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

scrollWidth：元素的屬性，表示元素內(nèi)部的滾動(dòng)內(nèi)容的寬度，一般來(lái)說(shuō)會(huì)大于等于元素寬度。

scrollHeight：元素的屬性，表示元素內(nèi)部的滾動(dòng)內(nèi)容的高度，一般來(lái)說(shuō)會(huì)大于等于元素高度。

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

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

scrollIntoView(arg)：滾動(dòng)元素所在的父元素，使得元素滾動(dòng)到可見(jiàn)區(qū)域，可以通過(guò) arg 來(lái)指定滾到中間、開(kāi)始或者就近。

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

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

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

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

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

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

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

// 大家可以試一試在控制臺(tái)輸出下面3個(gè)
document.documentElement
// >>> ...

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

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