bom

BOM是browser object model的縮寫，簡稱瀏覽器物件模型 ，提供了獨立於內容而與瀏覽器視窗進行互動的物件；

1、window物件 ，是JS的最頂層物件，其他的BOM物件都是window物件的屬性；

2、document物件，文件物件；

3、location物件，瀏覽器當前URL資訊；

4、navigator物件，瀏覽器本身資訊；

5、screen物件，客戶端螢幕資訊；

6、history物件，瀏覽器訪問歷史資訊；

dom

常見的知識點，是dom節點的增刪改查。

關於bom的三類偏移

一.page類的偏移

      window.pageYoffset
      window.pageXoffset
 

二.盒子模型的偏移---OCS，所指示的範圍，依次縮小

O---offSet系列

offsetWidth:    獲取元素的寬（包括左右padding和border）。

offsetHeight:    獲取元素的高（包括上下padding和border）。

offsetTop:    獲取元素距離上面位置的值。

offsetLeft:    獲取元素距離左邊位置的值。

offsetParent:    獲取距離自己最近的有定位的父元素。

C---client系列

clientWidth：可視區域的寬度（包括padding，不包括border）

clientHeight：可視區域的高度（包括padding，不包括border）

clientLeft：左邊框（border）的寬度

clientTop：上邊框（border）的寬度

clientX：滑鼠在可視區域中的橫座標

clientY：滑鼠在可視區域中的縱座標
 

S---scroll系列

scrollWidth：元素中內容的實際的寬（不包括邊框），如果元素中內容很少或沒有內容就是元素的寬。

scrollHeight：元素中內容的實際的高（不包括邊框），如果元素中內容很少或沒有內容就是元素的高。

scrollTop：向上捲曲出去的距離

scrollLeft：向左捲曲出去的距離

三.滑鼠的偏移

1.PageX/PageX:滑鼠在bai頁面上的位置,從頁面左上du角開始,即是以頁面為參考點,不隨滑動zhi條移動而變化
2.clientX/clientY:滑鼠在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.
可是悲劇的是,PageX只有FF特有,IE這個悲劇沒有啊T_T,所以大牛們想出了一個辦法
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
3.screenX/screenY：滑鼠在螢幕上的位置,從螢幕左上角開始（w3c標準）
4.offsetX/offsetY:IE特有,滑鼠相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值
5.
layerX/layerY：FF特有,滑鼠相比較於當前座標系的位置,即如果觸發元素沒有設定絕對定位或相對定位,以頁面為參考點,如果有,將改變參考座標系,從觸發元素盒子模型的border區域的左上角為參考點也就是當觸發元素設定了相對或者絕對定位後,layerX和offsetX就幸福地生活在一起^-^,幾乎相等,唯一不同就是一個從border為參考點,一個以內容為參考點