（一）BOM
1.BOM概念
瀏覽器對象模型（Browser Object Model）,開發(fā)人員使用BOM可以控制瀏覽器顯示的頁面以外的部分。
真正與眾不同的地方，是它作為Javascript實現(xiàn)的一部分，但卻沒有相關(guān)的標準。
HTML5發(fā)布后得到 了解決，HTML5致力于把BOM功能寫入正式規(guī)范。
從根本上講，BOM只是處理瀏覽器窗口和框架，但人們習慣上把所有針對**瀏覽器的Javascript擴展作為BOM的一部分。
（1）彈出新瀏覽器窗口的功能
（2）移動，縮放和關(guān)閉瀏覽器窗口的功能
（3）提供瀏覽器詳細信息的navigation對象
（4）提供瀏覽器所加載頁面的詳細信息location對象
（5）提供用戶顯示器分辨率詳細信息的screen對象
（6）對cookies的支持
（7）XMLHttpRequest和IE的ActiveXObiect這樣的自定義對象
**
BOM是Window對象、Document對象、History對象、Location對象、Navigator對象、Screen對象等合起來組成的模型，至今沒有各個瀏覽器統(tǒng)一的公開標準，但是一般各個瀏覽器都支持。
1.1window對象
Window 對象表示瀏覽器中打開的窗口。
如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創(chuàng)建一個 window 對象，并為每個框架創(chuàng)建一個額外的 window 對象。
1.1.1window對象集合
如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引(從0開始，從左到右，從上到下)或者框架名稱來訪問相應(yīng)的window對象。每個window對象都有一個name屬性，其中包含著框架的名稱。
要引用窗口中的一個框架，可以使用如下語法：
frame[i] //當前窗口的框架
self.frame[i] //當前窗口的框架
w.frame[i] //窗口 w 的框架
要引用一個框架的父窗口（或父框架），可以使用下面的語法：
parent //當前窗口的父窗口
self.parent //當前窗口的父窗口
w.parent //窗口 w 的父窗口
要從頂層窗口含有的任何一個框架中引用它，可以使用如下語法：
top //當前框架的頂層窗口
self.top //當前框架的頂層窗口
f.top //框架 f 的頂層窗口
1.1.2window對象屬性
| 屬性 | 描述 |
|---|---|
| closed | 返回窗口是否已被關(guān)閉。 |
| defaultStatus | 設(shè)置或返回窗口狀態(tài)欄中的默認文本。 |
| document | 對 Document 對象的只讀引用。請參閱 Document 對象。 |
| history | 對 History 對象的只讀引用。請參數(shù) History 對象。 |
| innerheight | 返回窗口的文檔顯示區(qū)的高度。 |
| innerwidth | 返回窗口的文檔顯示區(qū)的寬度。 |
| length | 設(shè)置或返回窗口中的框架數(shù)量。 |
| location | 用于窗口或框架的 Location 對象。請參閱 Location 對象。 |
| name | 設(shè)置或返回窗口的名稱。 |
| Navigator | 對 Navigator 對象的只讀引用。請參數(shù) Navigator 對象。 |
| opener | 返回對創(chuàng)建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部寬度。 |
| pageXOffset | 設(shè)置或返回當前頁面相對于窗口顯示區(qū)左上角的 X 位置。 |
| pageYOffset | 設(shè)置或返回當前頁面相對于窗口顯示區(qū)左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 對 Screen 對象的只讀引用。請參數(shù) Screen 對象。 |
| self | 返回對當前窗口的引用。等價于 Window 屬性。 |
| status | 設(shè)置窗口狀態(tài)欄的文本。 |
| top | 返回最頂層的先輩窗口。 |
| window | window 屬性等價于 self 屬性，它包含了對窗口自身的引用。 |
| screenLeft screenTop screenX screenY | 只讀整數(shù)。聲明了窗口的左上角在屏幕上的的 x 坐標和 y 坐標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
1.1.3window對象方法
| 方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段消息和一個確認按鈕的警告框。 |
| blur() | 把鍵盤焦點從頂層窗口移開。 |
| clearInterval() | 取消由 setInterval() 設(shè)置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設(shè)置的 timeout。 |
| close() | 關(guān)閉瀏覽器窗口。 |
| confirm() | 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 |
| createPopup() | 創(chuàng)建一個 pop-up 窗口。 |
| focus() | 把鍵盤焦點給予一個窗口。 |
| moveBy() | 可相對窗口的當前坐標把它移動指定的像素。 |
| moveTo() | 把窗口的左上角移動到一個指定的坐標。 |
| open() | 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 |
| print() | 打印當前窗口的內(nèi)容。 |
| prompt() | 顯示可提示用戶輸入的對話框。 |
| resizeBy() | 按照指定的像素調(diào)整窗口的大小。 |
| resizeTo() | 把窗口的大小調(diào)整到指定的寬度和高度。 |
| scrollBy() | 按照指定的像素值來滾動內(nèi)容。 |
| scrollTo() | 把內(nèi)容滾動到指定的坐標。 |
| setInterval() | 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。 |
| setTimeout() | 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。 |
這里主要介紹一下setTimeout和setInterval這兩個方法以及它們的清除方法。
setTimeout和setInterval都為js異步任務(wù)。
setTimeout()
用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。
語法
setTimeout(fn,millisec)
參數(shù)
fn 必需。要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
millisec 必需。在執(zhí)行代碼前需等待的毫秒數(shù)。
提示：setTimeout() 只執(zhí)行fn 一次。如果要多次調(diào)用，請使用 setInterval() 或者讓 fn自身再次調(diào)用 setTimeout()。
setInterval()
可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。
setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
語法
setInterval(fn,millisec)
參數(shù)
fn 必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
millisec 必須。周期性執(zhí)行或調(diào)用 code 之間的時間間隔，以毫秒計。
返回值
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執(zhí)行的值。
setInterval的缺點
再次強調(diào)，定時器指定的時間間隔，表示的是何時將定時器的代碼添加到消息隊列，而不是何時執(zhí)行代碼。所以真正何時執(zhí)行代碼的時間是不能保證的，取決于何時被主線程的事件循環(huán)取到，并執(zhí)行。
setInterval(function, N)
那么顯而易見，上面這段代碼意味著，每隔N秒把function事件推到消息隊列中，什么時候執(zhí)行？就不得而知了
上圖可見，setInterval每隔100ms往隊列中添加一個事件；100ms后，添加T1定時器代碼至隊列中，主線程中還有任務(wù)在執(zhí)行，所以等待，some event執(zhí)行結(jié)束后執(zhí)行T1定時器代碼；又過了100ms，T2定時器被添加到隊列中，主線程還在執(zhí)行T1代碼，所以等待；又過了100ms，理論上又要往隊列里推一個定時器代碼，但由于此時T2還在隊列中，所以T3不會被添加，結(jié)果就是此時被跳過；這里我們可以看到，T1定時器執(zhí)行結(jié)束后馬上執(zhí)行了T2代碼，所以并沒有達到定時器的效果。
綜上所述，setInterval有兩個缺點：
使用setInterval時，某些間隔會被跳過；
可能多個定時器會連續(xù)執(zhí)行；
鏈式setTimeout
setTimeout(function () {
// 任務(wù)
setTimeout(arguments.callee, interval);
}, interval)
警告：在嚴格模式下，第5版 ECMAScript (ES5) 禁止使用 arguments.callee()。當一個函數(shù)必須調(diào)用自身的時候, 避免使用 arguments.callee(), 通過要么給函數(shù)表達式一個名字,要么使用一個函數(shù)聲明.
上述函數(shù)每次執(zhí)行的時候都會創(chuàng)建一個新的定時器，第二個setTimeout使用了arguments.callee()獲取當前函數(shù)的引用，并且為其設(shè)置另一個定時器。好處：
(1)在前一個定時器執(zhí)行完前，不會向隊列插入新的定時器（解決缺點一）
(2)保證定時器間隔（解決缺點二）
1.2Navigator對象
Navigator對象包含有關(guān)瀏覽器的信息
1.2.1Navigator對象集合
| 集合 | 描述 |
|---|---|
| plugins[] | 返回對文檔中所有嵌入式對象的引用。該集合是一個 Plugin 對象的數(shù)組，其中的元素代表瀏覽器已經(jīng)安裝的插件。Plug-in 對象提供的是有關(guān)插件的信息，其中包括它所支持的 MIME 類型的列表。雖然 plugins[] 數(shù)組是由 IE 4 定義的，但是在 IE 4 中它卻總是空的，因為 IE 4 不支持插件和 Plugin 對象。 |
1.2.2 Navigator對象屬性
| 屬性 | 描述 |
|---|---|
| appCodeName | 返回瀏覽器的代碼名。 |
| appMinorVersion | 返回瀏覽器的次級版本。 |
| appName | 返回瀏覽器的名稱。 |
| appVersion | 返回瀏覽器的平臺和版本信息。 |
| browserLanguage | 返回當前瀏覽器的語言。 |
| cookieEnabled | 返回指明瀏覽器中是否啟用 cookie 的布爾值。 |
| cpuClass | 返回瀏覽器系統(tǒng)的 CPU 等級。 |
| onLine | 返回指明系統(tǒng)是否處于脫機模式的布爾值。 |
| platform | 返回運行瀏覽器的操作系統(tǒng)平臺。 |
| systemLanguage | 返回 OS 使用的默認語言。 |
| userAgent | 返回由客戶機發(fā)送服務(wù)器的 user-agent 頭部的值。 |
| userLanguage | 返回 OS 的自然語言設(shè)置。 |
1.2.3Navigator對象方法
| 方法 | 描述 |
|---|---|
| javaEnabled() | 規(guī)定瀏覽器是否啟用 Java。 |
| taintEnabled() | 規(guī)定瀏覽器是否啟用數(shù)據(jù)污點 (data tainting)。 |
1.3Screen對象
Screen 對象包含有關(guān)客戶端顯示屏幕的信息。
1.3.1Screen對象屬性
| 屬性 | 描述 |
|---|---|
| availHeight | 返回顯示屏幕的高度 (除 Windows 任務(wù)欄之外)。 |
| availWidth | 返回顯示屏幕的寬度 (除 Windows 任務(wù)欄之外)。 |
| bufferDepth | 設(shè)置或返回調(diào)色板的比特深度。 |
| colorDepth | 返回目標設(shè)備或緩沖器上的調(diào)色板的比特深度。 |
| deviceXDPI | 返回顯示屏幕的每英寸水平點數(shù)。 |
| deviceYDPI | 返回顯示屏幕的每英寸垂直點數(shù)。 |
| fontSmoothingEnabled | 返回用戶是否在顯示控制面板中啟用了字體平滑。 |
| height | 返回顯示屏幕的高度。 |
| logicalXDPI | 返回顯示屏幕每英寸的水平方向的常規(guī)點數(shù)。 |
| logicalYDPI | 返回顯示屏幕每英寸的垂直方向的常規(guī)點數(shù)。 |
| pixelDepth | 返回顯示屏幕的顏色分辨率（比特每像素）。 |
| updateInterval | 設(shè)置或返回屏幕的刷新率。 |
| width | 返回顯示器屏幕的寬度。 |
1.3.2Screen 對象描述
每個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放著有關(guān)顯示瀏覽器屏幕的信息。JavaScript 程序?qū)⒗眠@些信息來優(yōu)化它們的輸出，以達到用戶的顯示要求。例如，一個程序可以根據(jù)顯示器的尺寸選擇使用大圖像還是使用小圖像，它還可以根據(jù)顯示器的顏色深度選擇使用 16 位色還是使用 8 位色的圖形。另外，JavaScript 程序還能根據(jù)有關(guān)屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。
1.4History對象
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
1.4.1History對象屬性
| 屬性 | 描述 |
|---|---|
| length | 返回瀏覽器歷史列表中的 URL 數(shù)量。 |
1.4.2 History對象方法
| 方法 | 描述 |
|---|---|
| back() | 加載 history 列表中的前一個 URL。 |
| forward() | 加載 history 列表中的下一個 URL。 |
| go() | 加載 history 列表中的某個具體頁面。參數(shù)為-1表示當前頁面的前一個頁面 |
1.4.3History對象描述
History 對象最初設(shè)計來表示窗口的瀏覽歷史。但出于隱私方面的原因，History 對象不再允許腳本訪問已經(jīng)訪問過的實際 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
1.5 Location對象
Location 對象包含有關(guān)當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。
1.5.1 Location 對象屬性
| 屬性 | 描述 |
|---|---|
| hash | 設(shè)置或返回從井號 (#) 開始的 URL（錨）。 |
| host | 設(shè)置或返回主機名和當前 URL 的端口號。 |
| hostname | 設(shè)置或返回當前 URL 的主機名。 |
| href | 設(shè)置或返回完整的 URL。 |
| pathname | 設(shè)置或返回當前 URL 的路徑部分。 |
| port | 設(shè)置或返回當前 URL 的端口號。 |
| protocol | 設(shè)置或返回當前 URL 的協(xié)議。 |
| search | 設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）。 |
1.5.2 Location 對象方法
| 屬性 | 描述 |
|---|---|
| assign() | 加載新的文檔。 |
| reload() | 重新加載當前文檔。 |
| replace() | 用新的文檔替換當前文檔。 |
1.5.3Location對象描述
Location 對象存儲在 Window 對象的 Location 屬性中，表示那個窗口中當前顯示的文檔的 Web 地址。它的 href 屬性存放的是文檔的完整 URL，其他屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象（或 Area 對象）的 URL 屬性非常相似。當一個 Location 對象被轉(zhuǎn)換成字符串，href 屬性的值被返回。這意味著你可以使用表達式 location 來替代 location.href。
不過 Anchor 對象表示的是文檔中的超鏈接，Location 對象表示的卻是瀏覽器當前顯示的文檔的 URL（或位置）。但是 Location 對象所能做的遠遠不止這些，它還能控制瀏覽器顯示的文檔的位置。如果把一個含有 URL 的字符串賦予 Location 對象或它的 href 屬性，瀏覽器就會把新的 URL 所指的文檔裝載進來，并顯示出來。
除了設(shè)置 location 或 location.href 用完整的 URL 替換當前的 URL 之外，還可以修改部分 URL，只需要給 Location 對象的其他屬性賦值即可。這樣做就會創(chuàng)建新的 URL，其中的一部分與原來的 URL 不同，瀏覽器會將它裝載并顯示出來。例如，假設(shè)設(shè)置了Location對象的 hash 屬性，那么瀏覽器就會轉(zhuǎn)移到當前文檔中的一個指定的位置。同樣，如果設(shè)置了 search 屬性，那么瀏覽器就會重新裝載附加了新的查詢字符串的 URL。
除了 URL 屬性外，Location 對象的 reload() 方法可以重新裝載當前文檔，replace() 可以裝載一個新文檔而無須為它創(chuàng)建一個新的歷史記錄，也就是說，在瀏覽器的歷史列表中，新文檔將替換當前文檔。
