目錄

• 1. BOM概述
• • 1.1 定義
  • 1.2 BOM構成
• 2. window 對象常見事件
• • 2.1 窗口加載事件
  • 2.2 調整窗口大小事件
• 3. 定時器
• • 3.1 定時器
  • 3.2 setTimeout() 定時器
  • 3.3 停止 setTimeout() 定時器
  • 3.4 setInterval()定時器
  • 3.5 停止 setInterval() 定時器
  • 3.6 this
• 4. JavaScript執行機制
• • 4.1 單線程
  • 4.2 同步和異步
  • 4.4 JS執行機制
• 5. location對象
• • 5.1 定義
  • 5.2 URL
  • 5.3 location對象的屬性
  • 5.4 location對象的方法
• 6. navigator 對象
• 7. history對象

1. BOM概述

1.1 定義

BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立于內容而與瀏覽器窗口進行交互的對象，其核心對象是 window。
BOM 由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性。

DOM、BOM 比較

DOMBOM

文檔對象模型	瀏覽器對象模型
把文檔當做一個對象來看待	把瀏覽器當做一個對象來看待
頂級對象是 document	頂級對象是 window
操作頁面元素	瀏覽器窗口交互的一些對象
是W3C 標準規范	是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

1.2 BOM構成

windowdocumentlocationnavigationscreenhistory

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

• 是JavaScript 訪問瀏覽器窗口的一個接口；
• 是一個全局對象。

定義在全局作用域中的變量、函數都會變成 window 對象的屬性和方法。
在調用的時候可以省略 window。

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

2. window 對象常見事件

2.1 窗口加載事件

window.onload = function(){} // 或者 window.addEventListener("load",function(){});

window.onload 是窗口 (頁面）加載事件,當文檔內容完全加載完成會觸發該事件(包括圖像、腳本文件、CSS 文件等), 就調用的處理函數。

注：

用 window.onload 可以把 js 代碼寫到頁面元素的上方，因為 onload是等頁面內容全部加載完畢，再去執行處理函數；

以window.onload 這種傳統注冊事件方式，只能寫一次，如果有多個會以最后一個window.onload 為準； 但使用 addEventListener 則無此限制。

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件觸發時，僅DOM加載完成。不包括樣式表，圖片，flash等等。

IE9 以上才支持；
如頁面圖片較多, 從用戶訪問到onload觸發可能需要較長的時間,則交互效果不能很好實現，影響用戶體驗，此時用 DOMContentLoaded 事件更合適。

2.2 調整窗口大小事件

window.onresize = function(){}; // 或者 window.addEventListener("resize",function(){});

window.onresize 是調整窗口大小加載事件, 當觸發時就調用的處理函數。

注：

• 只要窗口大小發生像素變化，就會觸發此事件；
• 可利用此事件完成響應式布局，window.innerWidth當前屏幕的寬度。

3. 定時器

3.1 定時器

window 對象提供的 2 個方法-定時器。

• setTimeout();
• setInterval();

3.2 setTimeout() 定時器

// 語法結構 window.setTimeout(調用函數,[延遲的毫秒數]);

setTimeout() 方法用于設置一個定時器，該定時器在定時器到期后執行調用函數。

注：
此調用函數可直接寫函數，或者寫函數名或者采取字符串‘函數名()'三種形式；第3種不推薦。延遲數省略默認是 0，單位為毫秒。

3.3 停止 setTimeout() 定時器

window.clearTimeout(timeoutID) //timeoutID即定時器標識符。

clearTimeout()方法，取消了通過調用setTimeout()建立的定時器。

3.4 setInterval()定時器

window.setInterval(回調函數, [間隔的毫秒數]);

setInterval() 方法，重復調用一個函數，每隔設定的間隔時間，就去調用一次回調函數。

第一次執行也是在間隔毫秒數之后執行，之后每隔毫秒數就執行一次。

3.5 停止 setInterval() 定時器

window.clearInterval(intervalID); // 前面的window可省略

clearInterval()方法，取消了通過調用 setInterval()建立的定時器。

3.6 this

this的指向在函數定義的時候無法確定，只有函數執行的時候才能確定其具體指向，通常，this最終指向的是調用它的對象；

this指向：

全局作用域或者普通函數中this指向全局對象window（注：定時器的this除外，其指向window）；

方法調用中誰調用this，就指向誰；

構造函數中this指向構造函數的實例。

4. JavaScript執行機制

4.1 單線程

JavaScript 語言的一大特點就是單線程。
它是為處理頁面中用戶的交互，以及操作 DOM 而誕生的。

如對某個 DOM 元素進行添加和刪除操作。應該先進行添加，之后再刪除，它們不能同時進行。

單線程，即所有任務需排隊，前一任務結束，才執行后一任務。
如果 JS 執行時間過長，會造成頁面渲染不連貫，頁面渲染加載阻塞。

4.2 同步和異步

為了解決單線程導致的問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創建多個線程。于是，JS 中出現了同步和異步。

同步

前一個任務結束后再執行后一個任務，程序的執行順序與任務的排列順序是一致的、同步的。

異步

在做一件事的同時，還可以去處理其他事情。

• 同步任務
  同步任務都在主線程上執行，形成一個執行棧。

• 異步任務

  JS 異步通過回調函數實現。
  異步任務主要類型:
  1、普通事件：如 click、resize 等；
  2、資源加載：如 load、error 等；
  3、定時器：包括 setInterval、setTimeout 等。

異步任務相關回調函數添加到任務隊列中（任務隊列也稱消息隊列）。

4.4 JS執行機制

先執行執行棧中的同步任務;

異步任務（回調函數）放入任務隊列；

執行棧中的所有同步任務執行完畢，系統開始按次序讀取任務隊列中的異步任務，此時被讀取的異步任務結束其等待狀態，進入執行棧，開始執行。

由于主線程不斷的重復獲得任務、執行任務、再獲取任務、再執行，所以這種機制被稱為事件循環（ event loop）。

5. location對象

5.1 定義

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

5.2 URL

統一資源定位符 (Uniform Resource Locator, URL) 是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理。

/* URL 一般語法格式為：*/ protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link 組成說明

protocol	通信協議，常用的http、ftp、maito等
host	主機（域名）如 www.webldm.com
port	端口號 可選。省略時，使用方案的默認端口。如http的默認端口為80
path	路徑由0或多個“/”符號隔開的字符串組成，一般用來表示主機上的一個目錄或文件地址
query	參數 以鍵值對的形式，通過&符號分隔開來
fragment	片段 #后面內容 常見于鏈接 錨點

5.3 location對象的屬性

location對象屬性返回值

location.href	獲取或者設置整個URL
location.host	返回主機（域名）www.webldm.com
location.port	返回端口號，如果未寫，返回空字符串。
location.pathname	返回路徑
location.search	返回參數
location.hash	返回片段 #后面的內容，常見于鏈接 錨點

重點：href 和search

5.4 location對象的方法

location對象方法返回值

location.assign	跟href一樣，可以跳轉頁面（也稱為重定向頁面）
location.replace	替換當前頁面。因為不記錄歷史，所以不能后退頁面
location.reload	重新加載頁面，相當于刷新按鈕或F5。如果參數為true,相當于強制刷新Ctrl+F5

6. navigator 對象

navigator對象包含有關瀏覽器的信息，它有很多屬性，最常用的是userAgent，該屬性可以返回由客戶機發送服務器的user-agent頭部的值。

下面前端代碼可以判斷用戶哪個終端打開頁面，實現跳轉

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href = ""; //手機 } else { window.location.href = ""; //電腦 }

7. history對象

window 對象給我們提供了一個history對象，與瀏覽器歷史記錄進行交互。該對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

history對象方法作用

back()	后退功能
forward	前進功能
go(參數)	前進后退功能，參數如果是1，前進1個頁面；如果是-1，后退1個頁面。

history 對象一般在實際開發中比較少用，但是會在一些 OA 辦公系統中見到。如下圖：

總結

以上是生活随笔為你收集整理的前端学习之BOM（浏览器对象模型）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。