BOM 是什么
基础问答
问：了解过 BOM 吗？他和 DOM 有什么差异？
基础问答
问：了解过 BOM 吗？它和 DOM 有什么差异？
答：BOM 是浏览器对象，指的是如 window ，location ，history ，screen 等由浏览器提供的操作对象，是提供给开发人员操作浏览器的部分能力，比如前进后退，更新url等，没有强标准性，每个浏览器的实现有一定的差异。DOM 是文档对象，是开发者操作页面内容的一个标准。
扩展延伸
关于 BOM，这里主要列举一些和 DOM 的差异以及一些常用的 BOM 操作。
window 对象
所有的 BOM 对象都是 window 的属性或者方法。
window 是浏览器的一个实例，他同时作为全局作用域的载体和窗口API提供方存在，具有以下特征：
- 全局作用域载体：所有的全局变量、函数都会自动成为 window 的属性。
- 窗口控制：
open ，close等。
常用API：
| 类别 | API | 作用 |
|---|---|---|
| 窗口控制 | window.open(url, name, params) | 打开新窗口（如window.open('https://baidu.com', '_blank')） |
| window.close() | 关闭当前窗口（仅能关闭由 open() 操作打开的窗口） | |
| window.resizeTo(width, height) | 调整窗口大小（如resizeTo(800, 600)） | |
| 窗口位置 | window.scrollTo(x, y) | 滚动窗口到指定坐标（如scrollTo(0, 1000)滚动到页面底部） |
| window.innerWidth | 获取窗口可视区域宽度（不含工具栏、滚动条） | |
| 交互提示 | window.alert(msg) | 弹出警告框（无返回值） |
| window.confirm(msg) | 弹出确认框（返回true/false） | |
| window.prompt(msg, default) | 弹出输入框（返回用户输入内容或null） |
注意：alert/confirm/prompt 会阻塞代码执行。innerWidth 是可视区宽度，outerWidth 是浏览器窗口宽度。
location 对象
管理当前页面的 URL 信息，用于获取 URL 参数、跳转页面、刷新页面，是前端路由（如 History 模式）和页面导航的核心工具。
核心属性：
| 属性名 | 示例 | 含义/作用 |
|---|---|---|
| href | https://www.example.com:8080/path?name=test#hash | 完整 URL（可读写） |
| protocol | https:> 获取到的时候，是有这个冒号的，不是打错了 | 协议（如http:/https:） |
| host | www.example.com:8080 | 主机名 + 端口号 |
| pathname | /path | 路径部分 |
| search | ?name=test | 查询参数（含?） |
| hash | #hash | 哈希值（含#） |
常用API：
- assign：跳转到指定 URL，会产生一条浏览器历史记录，如
location.assign('https://baidu.com')，可通过浏览器后退返回原页面 - replace：替换当前 URL，不产生历史记录，如
location.replace('https://baidu.com')，无法通过浏览器后退返回原页面 - reload：刷新页面，force=true强制从服务器刷新，false优先从缓存刷新；
- location.hash = 'newHash' ：修改 URL 哈希值（不刷新页面，常用于前端路由，锚点跳转）。
history 对象
history对象记录了当前窗口的浏览历史，可用于实现前进、后退功能，是 SPA 前端路由的核心依赖。
| API | 功能说明 | 注意事项 |
|---|---|---|
| history.back() | 后退到上一条历史记录，等价于浏览器后退按钮 | 若当前是第一条历史记录，调用后无效果，不会报错 |
| history.forward() | 前进到下一条记录，等价于浏览器前进按钮 | 若当前是最后一条历史记录，调用后无效果，不会报错 |
| history.go(n) | 跳转到历史记录的第n条：n=1前进 1 条（等于前进），n=-1后退 1 条（等于后退），n=0刷新当前页 | 若n超出历史记录范围（如只有 2 条记录却调用go(3)），无效果且不报错 |
| history.pushState(state, title, url) | 添加新历史记录：state存自定义数据，title为页面标题（多数浏览器忽略），url为新 URL | 仅修改 URL 和历史记录，不刷新页面，也不触发hashchange事件 url需与当前页面同源 |
| history.replaceState(state, title, url) | 替换当前历史记录：参数含义与pushState一致 | 不产生历史记录，直接更新当前的记录 |
面试追问
-
如何通过 history 对象实现 SPA 的路由
参考笔者的《深入浅出 SPA/MPA》。 -
实现一个用于解析查询参数函数
/*** 解析查询参数字符串为对象* @param search 查询参数字符串（如 window.location.search）* @param keys 需要关注的键（可选，不传则返回全部） * @returns 解析后的参数对象*/
function parseSearchParams(search, keys, defaultValues) {const searchParams = new URLSearchParams(search);const result = { ...(defaultValues || {}) };if (keys) {// 只处理指定的键keys.forEach(key => {const value = searchParams.get(key);if (value !== null) {result[key] = decodeURIComponent(value);}});} else {// 处理全部键searchParams.forEach((value, key) => {result[key] = decodeURIComponent(value);});}return result;
}
