JS基礎-BOM

BOM

BOM 是 browser object model 的縮寫， 簡稱瀏覽器對象模型。 主要處理瀏覽器窗口和框架，
描述了與瀏覽器進行交互的方法和接口， 能夠對瀏覽器窗口進行訪問和操做， 譬如能夠彈出
新的窗口， 回退歷史記錄， 獲取 url……

BOM 與 DOM 的關係

1. javacsript 是經過訪問 BOM 對象來訪問、 控制、 修改瀏覽器
2. BOM 的 window 包含了 document， 所以經過 window 對象的 document 屬性就能夠訪問、
   檢索、 修改文檔內容與結構。
3. document 對象又是 DOM 模型的根節點。

所以， BOM 包含了 DOM， 瀏覽器提供出來給予訪問的是 BOM 對象， 從 BOM 對象再訪
問到 DOM 對象， 從而 js 能夠操做瀏覽器以及瀏覽器讀取到的文檔

BOM 對象包含哪些內容？

• Window JavaScript 層級中的頂層對象， 表示瀏覽器窗口。
• Navigator 包含客戶端瀏覽器的信息。
• History 包含了瀏覽器窗口訪問過的 URL。
• Location 包含了當前 URL 的信息。
• Screen 包含客戶端顯示屏的信息。

History 對象

History 對象包含用戶（在瀏覽器窗口中） 訪問過的 URL

方法/屬性	描述
length	返回瀏覽器歷史列表中的 URL 數量。
back()	加載 history 列表中的前一個 URL。
forward()	加載 history 列表中的下一個 URL。
go()	加載 history 列表中的某個具體頁面

Location 對象

Location 對象包含有關當前 URL 的信息。

屬性	描述
hash	設置或返回從井號 (#) 開始的 URL（錨） 。
host	設置或返回主機名和當前 URL 的端口號。
hostname	設置或返回當前 URL 的主機名。
href	設置或返回完整的 URL。
pathname	設置或返回當前 URL 的路徑部分。
port	設置或返回當前 URL 的端口號。
protocol	設置或返回當前 URL 的協議。
search	置或返回從問號 (?) 開始的 URL（查詢部分） 。

方法	描述
assign()	加載新的文檔。
reload(‘force’)	從新加載當前文檔。參數可選，不填或填 false 則取瀏覽器緩存的文檔
replace()	用新的文檔替換當前文檔。

Window 對象

Window 對象表示一個瀏覽器窗口或一個框架。 在客戶端 JavaScript 中， Window 對象
是全局對象，全部的表達式都在當前的環境中計算。 例如，能夠只寫 document， 而
沒必要寫 window.document。

屬性	描述
closed	返回窗口是否已被關閉。
defaultStatus	設置或返回窗口狀態欄中的默認文本。 （僅 Opera 支持）
document	對 Document 對象的只讀引用。 請參閱 Document 對象。
history	對 History 對象的只讀引用。 請參數 History 對象。
innerheight	返回窗口的文檔顯示區的高度。
innerwidth	返回窗口的文檔顯示區的寬度。
length	設置或返回窗口中的框架數量。
location	用於窗口或框架的 Location 對象。 請參閱 Location 對象。
name	設置或返回窗口的名稱。
Navigator	對 Navigator 對象的只讀引用。 請參數 Navigator 對象。
opener	返回對建立此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部寬度。
pageXOffset	設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset	設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent	返回父窗口。
Screen	對 Screen 對象的只讀引用。 請參數 Screen 對象。
self	返回對當前窗口的引用。 等價於 Window 屬性。
status	設置窗口狀態欄的文本。 (默認只支持 Opera)
top	返回最頂層的先輩窗口。
window	window 屬性等價於 self 屬性， 它包含了對窗口自身的引用。
screenLeft screenTop screenX screenY	只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。 IE、 Safari、 Chrome 和 Opera 支持 screenLeft 和 screenTop， 而 Chrome、 Firefox 和 Safari 支持 screenX 和 screenY。

方法	描述
alert()	顯示帶有一段消息和一個確認按鈕的警告框。
blur()	把鍵盤焦點從頂層窗口移開。
confirm()	顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
createPopup()	建立一個彈出窗口。 只有 ie 支持（不包括 ie11）
focus()	把鍵盤焦點給予一個窗口。
moveBy()	可相對窗口的當前座標把它移動指定的像素。
moveTo()	把窗口的左上角移動到一個指定的座標。
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口。 window.open(URL,name,features,replace)
print()	打印當前窗口的內容。
prompt()	顯示可提示用戶輸入的對話框。
resizeBy()	按照指定的像素調整窗口的大小。
resizeTo()	把窗口的大小調整到指定的寬度和高度。
scrollBy()	按照指定的像素值來滾動內容。
scrollTo()	把內容滾動到指定的座標。
setInterval()	按照指定的週期（以毫秒計） 來調用函數或計算表達式。
setTimeout()	在指定的毫秒數後調用函數或計算表達式。
clearInterval()	取消由 setInterval() 設置的 timeout。
clearTimeout()	取消由 setTimeout() 方法設置的 timeout。close() 關閉瀏覽器窗口

Navigator 對象

Navigator 對象包含的屬性描述了正在使用的瀏覽器。 能夠使用這些屬性進行平臺專用的配置。 雖然這個對象的名稱顯而易見的是 Netscape 的 Navigator 瀏覽器， 但其餘實現了 JavaScript 的瀏覽器也支持這個對象。

屬性	描述
appCodeName	返回瀏覽器的代碼名。 以 Netscape 代碼爲基礎的瀏覽器中， 它的值是 "Mozilla"。Microsoft 也是
appMinorVersion	返回瀏覽器的次級版本。 （IE四、 Opera 支持）
appName	返回瀏覽器的名稱。
appVersion	返回瀏覽器的平臺和版本信息。
browserLanguage	返回當前瀏覽器的語言。 （IE 和 Opera 支持）cookieEnabled 返回指明瀏覽器中是否啓用 cookie 的布爾值。
cpuClass	返回瀏覽器系統的 CPU 等級。 （IE 支持）
onLine	返回指明系統是否處於脫機模式的布爾值。
platform	返回運行瀏覽器的操做系統平臺。
systemLanguage	返回當前操做系統的默認語言。 （IE 支持）
userAgent	返回由客戶機發送服務器的 user-agent 頭部的值。
userLanguage	返回操做系統設定的天然語言。 （IE 和 Opera 支持）
plugins	返回包含客戶端安裝的全部插件的數組

方法	描述
javaEnabled()	規定瀏覽器是否支持並啓用了 Java。
taintEnabled()	規定瀏覽器是否啓用數據污點 (data tainting)。

Screen 對象

Screen 對象包含有關客戶端顯示屏幕的信息。 每一個 Window 對象的 screen 屬性都引用一個 Screen 對象。 Screen 對象中存放着有關顯示瀏覽器屏幕的信息。 JavaScript 程序將利用這些信息來優化它們的輸出， 以達到用戶的顯示要求。 例如，一個程序能夠根據顯示器的尺寸選擇使用大圖像仍是使用小圖像，它還能夠根據顯示器的顏色深度選擇使用 16 位色仍是使用 8 位色的圖形。 另外，JavaScript 程序還能根有關屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。

屬性	描述
availHeight	返回顯示屏幕的高度 (除 Windows 任務欄以外)。
availWidth	返回顯示屏幕的寬度 (除 Windows 任務欄以外)。
bufferDepth	設置或返回調色板的比特深度。 （僅 IE 支持）colorDepth 返回目標設備或緩衝器上的調色板的比特深度。
deviceXDPI	返回顯示屏幕的每英寸水平點數。 （僅 IE 支持）
deviceYDPI	返回顯示屏幕的每英寸垂直點數。 （僅 IE 支持）
fontSmoothingEnabled	返回用戶是否在顯示控制面板中啓用了字體平滑。 （僅 IE 支持）
height	返回顯示屏幕的高度。
logicalXDPI	返回顯示屏幕每英寸的水平方向的常規點數。 （僅 IE 支持）
logicalYDPI	返回顯示屏幕每英寸的垂直方向的常規點數。 （僅 IE 支持）
pixelDepth	返回顯示屏幕的顏色分辨率（比特每像素） 。
updateInterval	設置或返回屏幕的刷新率。 （僅 IE11 如下支持）
width	返回顯示器屏幕的寬度。

檢測瀏覽器版本版本有哪些方式？

• 根據 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
• 根據 window 對象的成員 // 'ActiveXObject' in window

offsetWidth/offsetHeight,clientWidth/clientHeight 與 scrollWidth/scrollHeight 的區別

• offsetWidth/offsetHeight 返回值包含 content + padding + border，效果與 e.getBoundingClientRect()相同
• clientWidth/clientHeight 返回值只包含 content + padding，若是有滾動條，也不包含滾動條
• scrollWidth/scrollHeight 返回值包含 content + padding + 溢出內容的尺寸