1. BOM概述
1.1 什么是BOM
- BOM（Browser Object Model）即瀏覽器物件模型，它提供了獨立于內容而與瀏覽器視窗進行互動的物件，其核心物件是 window
- BOM 由一系列相關的物件構成，并且每個物件都提供了很多方法與屬性
- BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA，DOM 的標準化組織是 W3C，BOM 最初是Netscape 瀏覽器標準的一部分
DOM與BOM比較：
1.2 BOM的構成
BOM 比 DOM 更大，它包含 DOM
window 物件是瀏覽器的頂級物件，它具有雙重角色：
-
它是 JS 訪問瀏覽器視窗的一個介面
-
它是一個全域物件，定義在全域作用域中的變數、函式都會變成 window 物件的屬性和方法，
在呼叫的時候可以省略 window，前面學習的對話框都屬于 window 物件方法，如 alert()、prompt() 等，
注意：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等等，
如果頁面的圖片很多的話，從用戶訪問到onload觸發可能需要較長的時間，互動效果就不能實作，必然影響用 戶的體驗，此時用DOMContentLoaded事件比較合適，
2.2 調整視窗大小事件
window.onresize = function(){};
window.addEventListener("resize",function(){});
window.onresize是調整視窗大小加載事件, 當觸發時就呼叫的處理函式，
注意：
- 只要視窗大小發生像素變化，就會觸發這個事件
- 我們經常利用這個事件完成回應式布局，
window.innerWidth：當前螢屏的寬度
3. 定時器
3.1 setTimeout() 定時器
window.setTimeout(呼叫函式, [延遲的毫秒數]);
注意：
- window 可以省略
- 這個呼叫函式可以直接寫函式，或者寫函式名或者采取字串‘函式名()'三種形式，第三種不推薦
- 延遲的毫秒數省略默認是 0，如果寫，必須是毫秒
- 因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號
停止定時器：
window.clearTimeout(timeoutID);
3.2 setInterval() 定時器
window.setInterval(回呼函式, [間隔的毫秒數]); // 每隔一定時間，就去呼叫一次回呼函式
注意：
- window 可以省略
- 這個呼叫函式可以直接寫函式，或者寫函式名或者采取字串 '函式名()' 三種形式
- 間隔的毫秒數省略默認是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動呼叫這個函式
- 因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號
- 第一次執行也是間隔毫秒數之后執行，之后每隔毫秒數就執行一次
停止定時器：
window.clearInterval(intervalID);
4. location 物件
4.1 什么是 location 物件
window 物件給我們提供了一個 location 屬性用于獲取或設定表單的 URL，并且可以用于決議 URL ， 因為 這個屬性回傳的是一個物件，所以我們將這個屬性也稱為 location 物件，
4.2 URL
統一資源定位符 (Uniform Resource Locator, URL) 是互聯網上標準資源的地址，互聯網上的每個檔案都有 一個唯一的 URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎么處理它，
格式：
protocol://host[:port]/path/[?query]#fragment
4.3 location 物件的屬性
4.4 location 物件的方法
5. 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.hrefhttps://www.cnblogs.com/jacklzx/archive/2020/10/14/= ""; //手機
} else {
window.location.hrefhttps://www.cnblogs.com/jacklzx/archive/2020/10/14/= ""; //電腦
}
6. history 物件
window 物件給我們提供了一個 history 物件，與瀏覽器歷史記錄進行互動，該物件包含用戶（在瀏覽器視窗中） 訪問過的 URL，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172634.html
標籤：其他
上一篇：CSS精靈圖與字體圖示
下一篇：bootstrap回應式圖片