BOM 是瀏覽器給你的遙控器——操作網址列、偵測螢幕大小、存取剪貼簿，這些全靠它。
先講結論
你有沒有想過，JavaScript 怎麼能控制瀏覽器的網址列、偵測使用者的螢幕大小、甚至讀寫剪貼簿？這些都不是「網頁內容」的一部分，而是瀏覽器本身提供的能力。BOM（Browser Object Model）就是這座橋樑。搞懂它，你才真正知道 JavaScript 在瀏覽器裡的守備範圍有多大。
window：老大中的老大
window 是瀏覽器的全域物件，所有全域變數和函數都掛在它上面。你平常寫的 alert()、setTimeout() 其實都是 window.alert()、window.setTimeout()。
// 視窗尺寸
window.innerWidth; // 視窗內部寬度（不含工具列）
window.innerHeight; // 視窗內部高度
// 滾動
window.scrollTo({ top: 100, behavior: 'smooth' });
window.scrollBy(0, 50); // 相對滾動計時器也是 window 的一部分：
// setTimeout - 延遲執行（一次）
const timeoutId = setTimeout(() => console.log('3 秒後'), 3000);
clearTimeout(timeoutId);
// setInterval - 定期執行
const intervalId = setInterval(() => console.log('每秒'), 1000);
clearInterval(intervalId);
// requestAnimationFrame - 動畫用（約 60fps）
function animate() {
// 更新動畫
requestAnimationFrame(animate);
}對了，alert()、confirm()、prompt() 這些對話框也是 window 的方法。但現代應用幾乎不用了——它們會阻塞 JavaScript 執行，使用者體驗很差。現在都改用自訂 Modal。
location：掌管網址的那位
location 包含當前 URL 的所有資訊，也能用來導航。
// URL: https://example.com:8080/path/page.html?id=123#section
location.href; // 完整 URL
location.hostname; // "example.com"
location.pathname; // "/path/page.html"
location.search; // "?id=123"
location.hash; // "#section"
// 導航
location.href = 'https://example.com'; // 跳轉（留歷史）
location.replace('https://example.com'); // 跳轉（不留歷史）
location.reload(); // 重新載入
// 解析 Query String（這個超常用）
const params = new URLSearchParams(location.search);
params.get('id'); // "123"history：上一頁下一頁的幕後推手
SPA 的路由機制就是靠 history 撐起來的。
history.back(); // 上一頁
history.forward(); // 下一頁
// HTML5 History API（SPA 路由的核心）
history.pushState({ page: 1 }, '', '/page1');
history.replaceState({ page: 2 }, '', '/page2');
// 監聽使用者按上一頁/下一頁
window.addEventListener('popstate', (event) => {
console.log('State:', event.state);
});為什麼 React Router 或 Vue Router 可以不重新載入頁面就切換路由？就是用 pushState 做到的。
navigator：偵察使用者環境
需要知道使用者的瀏覽器、語言、有沒有網路？問 navigator 就對了。
navigator.userAgent; // 瀏覽器識別字串
navigator.language; // "zh-TW"
navigator.onLine; // 是否連線
// 剪貼簿 API（要 HTTPS）
await navigator.clipboard.writeText('複製的文字');
const text = await navigator.clipboard.readText();
// 地理位置
navigator.geolocation.getCurrentPosition(
(pos) => console.log(pos.coords.latitude, pos.coords.longitude),
(err) => console.error(err)
);Storage API：前端的小倉庫
// localStorage - 永久儲存（關掉瀏覽器還在）
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');
// sessionStorage - 分頁關閉就沒了
sessionStorage.setItem('tempData', 'something');
// 存物件要先 JSON.stringify
localStorage.setItem('user', JSON.stringify({ name: 'John' }));
const user = JSON.parse(localStorage.getItem('user'));一個容易踩坑的地方：localStorage 跟 sessionStorage 只能存字串。直接存物件會變成 [object Object]，然後你 debug 半天才發現忘了 JSON.stringify。別問我怎麼知道的。
BOM vs DOM 一句話區分
BOM 操作的是瀏覽器（視窗、網址、儲存），DOM 操作的是網頁內容（元素、事件）。BOM 的根物件是 window，DOM 的根物件是 document。搞混的話，想一下：「我要操作的東西，關掉網頁內容之後還存在嗎？」存在的就是 BOM 的範疇。
BOM 就像瀏覽器的說明書，只是大部分人都不看——然後出事了才開始翻。