基础问答
问：了解过 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;
}
