笨鸟理解
BOM主要是提供 JavaScript 与整个浏览器环境进行交互的接口
BOM 与 DOM 的关系：
- DOM (Document Object Model)： 将 HTML 或 XML 文档表示为一个树形结构，允许 JavaScript 操作文档的内容（元素、属性、文本等）和结构。
- BOM (Browser Object Model)： 提供了与浏览器窗口本身以及浏览器环境交互的对象和方法。它包含了 DOM (document 对象作为 window 的一个属性)。
总结： BOM 的范围比 DOM 更大。DOM 专注于文档内容，而 BOM 专注于浏览器窗口和环境（包括文档、导航、历史、浏览器信息、屏幕信息等）。window 是 BOM 的顶层对象，document 是 DOM 的顶层对象（通过 window.document 访问）。
常用方法展示
| 对象/接口 | 属性/方法 | 功能说明 | 基本用法示例 |
|---|---|---|---|
| window | innerWidth/innerHeight | 获取可视区域尺寸 | const width = window.innerWidth; |
| open()/close() | 打开/关闭窗口 | window.open('https://example.com', '_blank'); |
|
| scrollTo() | 滚动到指定位置 | window.scrollTo({ top: 500, behavior: 'smooth' }); |
|
| setTimeout() | 延迟执行 | setTimeout(() => { alert('Hi'); }, 2000); |
|
| localStorage | 本地存储 | localStorage.setItem('key', 'value'); |
|
| alert() | 警告框 | window.alert('Warning!'); |
|
| location | href | 获取/设置URL | location.href = 'https://new-site.com'; |
| reload() | 重新加载页面 | location.reload(true); // 强制刷新 |
|
| search | 获取查询参数 | const params = new URLSearchParams(location.search); |
|
| history | back()/forward() | 历史导航 | history.back(); // 等同于浏览器后退按钮 |
| pushState() | 修改历史记录 | history.pushState({}, '', '/new-url'); |
|
| navigator | userAgent | 浏览器标识 | const isMobile = /Mobi/.test(navigator.userAgent); |
| geolocation | 地理位置 | navigator.geolocation.getCurrentPosition(showPosition); |
|
| clipboard | 剪贴板操作 | navigator.clipboard.writeText('要复制的文本'); |
|
| screen | width/height | 屏幕分辨率 | const screenWidth = screen.width; |