JavaScript BOM
浏览器窗口及其宿主对象在 JavaScript 中的接口总览与阅读入口。
#tech / dev / frontend
#type / synthesis
#status / growing
#resource / javascript
#resource / web
#platform / browser
[!info] related notes
JavaScript BOM
BOM 是浏览器宿主环境提供给 JavaScript 的窗口级能力集合。和 DOM 相比，它不聚焦页面节点树，而是聚焦窗口、地址、历史、定时器、导航、环境信息等浏览器外围能力。
范围
这篇笔记不试图把所有浏览器 API 全塞在一页里，而是只回答两件事：
- BOM 在浏览器运行时里到底管什么
- 这些对象应该从哪里继续深入看
BOM 和 DOM 的边界
- DOM 处理文档结构和节点树，见 javascript-dom
- BOM 处理浏览器窗口及其外围对象
- 二者通常都通过
window暴露出来，但职责不同
最容易混淆的是：
document更偏 DOM，不是这次 BOM 对象簇的重点localStorage/sessionStorage属于浏览器宿主能力，但更适合放在 browser-client-storage- 定时器、对话框、滚动、导航属于 BOM 常用能力，但它们不都需要单独变成“对象主笔记”
window 为什么是 BOM 入口
在浏览器里，window 同时扮演两层角色：
- ECMAScript 全局对象的主要承载者
- 浏览器窗口实例的 JavaScript 接口
所以 document、location、history、navigator、screen、定时器方法、对话框方法都可以从 window 进入。
先看：
BOM 核心对象地图
1. window
负责：
- 全局对象入口
- 窗口行为
- 视口、滚动、弹窗、计时器、宿主对象总入口
继续阅读：
2. location
负责：
- 当前页面 URL 信息
- 页面跳转
- 刷新与替换导航
继续阅读：
3. history
负责：
- 浏览器会话历史中的前进后退
- 历史状态对象
- SPA 常见的
pushState/replaceState
继续阅读：
4. navigator
负责：
- 浏览器与运行环境信息
- 平台、语言、在线状态等能力入口
- 一部分宿主功能入口对象
继续阅读：
5. screen
负责：
- 物理屏幕尺寸与像素信息
- 分辨率、可用区域等设备侧信息
继续阅读：
常见宿主能力，但不都属于“核心对象笔记”
导航能力
location.assign()location.replace()location.reload()
历史能力
history.back()history.forward()history.go()history.pushState()history.replaceState()
定时器
setTimeout()setInterval()
对话框
alert()confirm()prompt()
窗口与视口行为
open()scrollTo()innerWidth/innerHeight
推荐阅读顺序
- window-object
- location-object
- history-object
- navigator-object
- screen-object
- browser-client-storage
- javascript-events
容易混淆的点
- 定时器属于宿主 API，不是 ECMAScript 规范本体
window.location和document.location指向同一个Location对象history不会把用户完整访问记录直接暴露给脚本screen说的是物理屏幕，不等于当前页面视口navigator能提供环境信息，但很多字段并不适合作为可靠业务判断依据
最短记忆方式
BOM 不是页面结构，而是浏览器窗口和外围环境的对象层；先抓 window/location/history/navigator/screen 这五个入口，其他能力再按主题分流。