1、BOM概述

1.BOM = Browser Object Model ??瀏覽器對象模型

2.它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是 window

3.BOM 由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性

4.BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA, DOM 的標準化組織是 W3C, BOM最初是Netscape 瀏覽器標準的一部分

1.1、BOM的構(gòu)成

1.BOM 比 DOM 更大。它包含 DOM。

2.window 對象是瀏覽器的頂級對象，它具有雙重角色

3.它是 JS 訪問瀏覽器窗口的一個接口

4.它是一個全局對象。定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法

5.在調(diào)用的時候可以省略 window，前面學(xué)習(xí)的對話框都屬于 window 對象方法，如 alert()、prompt()等。

注意：window下的一個特殊屬性 window.name

2、window 對象的常見事件

2.1、窗口加載事件

window.onload是窗口（頁面）加載事件，當文檔內(nèi)容完全加載完成會觸發(fā)該事件（包括圖像，腳本文件，CSS文件等），就調(diào)用的處理函數(shù)。

注意：

1.有了window.onload就可以把JS代碼寫到頁面元素的上方

2.因為onload是等頁面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)

3.window.onload 傳統(tǒng)注冊事件方式，只能寫一次

4.如果有多個，會以最后一個window.onload為準

5.如果使用addEventListener 則沒有限制

接收兩個參數(shù)：

1.DOMCountentLoaded事件觸發(fā)時，僅當DOM加載完成，不包括樣式表，圖片，flash等等

2.如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時間

3.交互效果就不能實現(xiàn)，必然影響用戶的體驗，此時用 DOMContentLoaded事件比較合適。

2.1.1、區(qū)別

• load等頁面內(nèi)容全部加載完畢，包括頁面dom元素，圖片，flash，css等

• DOMContentLoaded?是DOM加載完畢，不包含圖片 flash css 等就可以執(zhí)行，加載速度比load更快一些

2.2、調(diào)整窗口大小事件

window.onresize?是調(diào)整窗口大小加載事件，當觸發(fā)時就調(diào)用的處理函數(shù)

• 只要窗口大小發(fā)生像素變化，就會觸發(fā)這個事件

• 我們經(jīng)常利用這個事件完成響應(yīng)式布局。window.innerWidth?當前屏幕的寬度

3、定時器

window 對象給我們提供了兩個定時器

• setTimeout()

• setInterval()

3.1、setTimeout()定時器

setTimeout()方法用于設(shè)置一個定時器，該定時器在定時器到期后執(zhí)行調(diào)用函數(shù)。

注意：

• window可以省略

• 這個調(diào)用函數(shù)

• 可以直接寫函數(shù)

• 或者寫函數(shù)名

• 或者采取字符串?‘函數(shù)名()’?（不推薦）

• 延遲的毫秒數(shù)省略默認是0，如果寫，必須是毫秒

• 因為定時器可能有很多，所以我們經(jīng)常給定時器賦值一個標識符

• setTimeout()?這個調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)?callback

• 普通函數(shù)是按照代碼順序直接調(diào)用，而這個函數(shù)，需要等待事件，事件到了才會去調(diào)用這個函數(shù)，因此稱為回調(diào)函數(shù)。

3.2、clearTimeout()停止定時器

• clearTimeout()方法取消了先前通過調(diào)用?setTimeout()建立的定時器

注意：

• window可以省略

• 里面的參數(shù)就是定時器的標識符

3.3、setInterval()定時器

• setInterval()方法重復(fù)調(diào)用一個函數(shù)，每隔這個時間，就去調(diào)用一次回調(diào)函數(shù)

• window可以省略

• 這個回調(diào)函數(shù):

• 可以直接寫函數(shù)

• 或者寫函數(shù)名

• 或者采取字符 ‘函數(shù)名()’

• 第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次

3.4、clearInterval()停止定時器

• clearInterval ( )?方法取消了先前通過調(diào)用?setInterval()?建立的定時器

注意：

• window可以省略

• 里面的參數(shù)就是定時器的標識符

3.5、this指向

1.this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰

現(xiàn)階段，我們先了解一下幾個this指向

2.全局作用域或者普通函數(shù)中this指向全局對象window(注意定時器里面的this指向window)

3.方法調(diào)用中誰調(diào)用this指向誰

4.構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例

4、location對象

• window 對象給我們提供了一個?location屬性用于獲取或者設(shè)置窗體的url，并且可以解析url。因為這個屬性返回的是一個對象，所以我們將這個屬性也稱為 location 對象。

4.1、url

==統(tǒng)一資源定位符（uniform resouce locator）==是互聯(lián)網(wǎng)上標準資源的地址?；ヂ?lián)網(wǎng)上的每個文件都有一個唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。

url 的一般語法格式為：

4.2、location對象屬性

重點記?。?href和search

需求：5s之后跳轉(zhuǎn)頁面

4.3、location對象方法

4.4、獲取URL參數(shù)

我們簡單寫一個登錄框，點擊登錄跳轉(zhuǎn)到 index.html

接下來我們寫 index.html

這樣我們就能獲取到路徑上的URL參數(shù)

5、navigator對象

• navigator 對象包含有關(guān)瀏覽器的信息，它有很多屬性

• 我們常用的是userAgent,該屬性可以返回由客戶機發(fā)送服務(wù)器的user-agent頭部的值

下面前端代碼可以判斷用戶是用哪個終端打開頁面的，如果是用 PC 打開的，我們就跳轉(zhuǎn)到 PC 端的頁面，如果是用手機打開的，就跳轉(zhuǎn)到手機端頁面

6、history對象

• window 對象給我們提供了一個 history 對象，與瀏覽器歷史記錄進行交互

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