什麼是瀏覽器物件模型 BOM？
前一個章節我們講到了瀏覽器的文件物件模型 DOM，也提到了瀏覽器具備了網址列、前進後退、重整、分頁等等功能。
甚至現代的瀏覽器能做到更多的事情，像是攝影機、麥克風、藍芽、地理位置等等。
這些功能被瀏覽器的開發廠商封裝成了一個可以被訪問的物件模型，也就是瀏覽器物件模型 (Browser Object Model, BOM)。
瀏覽器物件模型的組成
瀏覽器物件模型 BOM 是由一系列的物件組成，這些物件可以讓我們操作瀏覽器的各種功能。
可以透過 window 物件來訪問 BOM 的功能，window 物件是 BOM 的根物件，它長得像這樣：
window
├── document // 文件物件模型 DOM
├── location // 瀏覽器的網址列
├── history // 瀏覽器的歷史紀錄
├── navigator // 瀏覽器的資訊
├── screen // 瀏覽器的螢幕資訊
├── frames // 瀏覽器的分頁
├── localStorage // 瀏覽器的本地儲存
├── sessionStorage // 瀏覽器的會話儲存
├── alert() // 顯示一個警告視窗
├── confirm() // 顯示一個確認視窗
├── prompt() // 顯示一個提示視窗
├── setTimeout() // 設定一個定時器
├── setInterval() // 設定一個間隔定時器
...還有很多其他的物件和方法你可能會覺得奇怪，為什麼 DOM 是 BOM 的一部分？
這是因為 BOM 是瀏覽器對於該視窗該分頁的主體，而 DOM 是瀏覽器對於該分頁的內容，所以 DOM 也是 BOM 的一部分。
在 JavaScript 裡，你可以透過 window.document 來訪問文件物件模型 DOM，也可以直接使用 document 來訪問文件物件模型 DOM。
這是因為瀏覽器會將 BOM 的所有屬性都列為全域可訪問。
同理地，你也可以這樣做：
| window的屬性 | 直接訪問 | 用途 |
|---|---|---|
| window.location | location | 網址列 |
| window.history | history | 歷史紀錄、前進、後退 |
| window.navigator | navigator | 瀏覽器資訊 |
| window.screen | screen | 螢幕資訊、長寬 |
| window.frames | frames | 分頁 |
| window.localStorage | localStorage | 本地儲存 |
| window.sessionStorage | sessionStorage | 會話儲存 |
| window.alert() | alert() | 警告視窗 |
| window.confirm() | confirm() | 確認視窗 |
| window.prompt() | prompt() | 提示視窗 |
| window.setTimeout() | setTimeout() | 定時器 |
| window.setInterval() | setInterval() | 間隔定時器 |
| window.console.log() | console.log() | 控制台 |
還在持續增長中的 BOM
由於現代的瀏覽器也應用於手機端、平板端、桌面端等，所以 BOM 也在持續增長。
像是 GPS, 多媒體存取, 藍芽, 電池, 螢幕錄影等就被封裝在 Navigator 中。
| 功能 | 說明 | 語法 |
|---|---|---|
| Geolocation | 取得使用者的地理位置 | navigator.geolocation |
| MediaDevices | 取得使用者的多媒體設備 | navigator.mediaDevices |
| Bluetooth | 取得使用者的藍芽設備 | navigator.bluetooth |
| Battery | 取得使用者的電池資訊 | navigator.battery |
| Screen Recording | 取得使用者的螢幕錄影 | navigator.mediaDevices.getDisplayMedia() |
結語
BOM 是瀏覽器對於瀏覽器的物件模型，它提供了許多可以讓我們操作瀏覽器的功能。
很多時候我們會使用 BOM 來操作瀏覽器的功能，像是跳轉頁面、顯示警告視窗、設定定時器、利用 LocalStorage 和 SessionStorage 來儲存資料等。
最基本的，我們最常使用 console.log 來印出資訊。
以上都是 BOM 的功能，有些提到但沒有深論的，未來我們會逐一介紹。