BOM 完整精讲（和 DOM 对比、核心对象、常用 API 一次性吃透）

一、BOM 是什么

BOM：Browser Object Model，浏览器对象模型。

一句话区别：

• DOM：操作网页内容（HTML 标签、元素、文本）
• BOM：操作浏览器本身（窗口、地址栏、历史记录、浏览器信息、弹窗、定时器）

BOM 没有统一严格标准，由浏览器厂商约定实现；

DOM 是 W3C 标准，所有浏览器统一。

二、BOM 核心顶层对象

window 是 BOM 的顶级根对象

页面里所有东西都挂在 window 身上：

1. 所有 BOM 对象 都属于 window
2. document（DOM 入口）也属于 window
3. 全局变量、全局函数，默认都是 window 的属性

js

// 完全等价
alert()
window.alert()

三、BOM 六大核心成员（必记）

1. window 窗口对象

BOM 总老大，自带能力：

• 弹窗：alert() / confirm() / prompt()
• 定时器：setTimeout / setInterval
• 窗口控制：open() 新开窗口、close() 关闭窗口
• 窗口事件：onload、onresize 窗口大小改变、onscroll 滚动

2. location 地址栏对象

控制浏览器URL 地址，超级常用：

js

location.href = "https://www.baidu.com"  // 页面跳转
location.reload()                       // 刷新页面
location.host                           // 域名+端口
location.pathname                       // 路由路径
location.search                         // 获取 ? 后面参数

3. history 历史记录对象

控制浏览器前进、后退：

js

history.back()      // 后退一页
history.forward()   // 前进一页
history.go(-2)      // 后退两页

不能获取历史网址，只能控制跳转，保护隐私。

4. navigator 浏览器信息对象

获取浏览器、设备、系统信息：

js

// 最常用：判断手机/电脑端
navigator.userAgent  
// 浏览器内核、版本、操作系统都在这里

5. screen 屏幕对象

获取电脑屏幕分辨率、宽高：

js

screen.width    // 屏幕总宽度
screen.height   // 屏幕总高度

6. 滚动 & 窗口尺寸（BOM 常用）

js

// 可视区域宽高
window.innerWidth
window.innerHeight

// 页面滚动距离
document.documentElement.scrollTop
window.scrollTo(0, 200)  // 滚动到指定位置

四、最关键：BOM 和 DOM 层级关系

plaintext

window 【BOM 顶级对象】
 ├── document 【DOM 入口】
 ├── location
 ├── history
 ├── navigator
 ├── screen
 └── 定时器、弹窗、窗口方法

✅ BOM 包含 DOM

想操作页面标签 → 用 DOM

想操作浏览器窗口 / 地址 / 历史 → 用 BOM

五、DOM vs BOM 清晰对比表

表格

对比项	DOM	BOM
全称	文档对象模型	浏览器对象模型
操作对象	网页 HTML 文档	浏览器窗口本身
根入口	document	window
标准	W3C 统一标准	浏览器厂商自定义，无严格标准
作用	改标签、改文本、改样式、绑定事件	跳转页面、刷新、弹窗、定时器、获取浏览器信息
包含关系	属于 window 的一个属性	顶层模型，包含 DOM