【每日一面】BOM 是什么

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一致	不产生历史记录，直接更新当前的记录

面试追问

1. 如何通过 history 对象实现 SPA 的路由
   参考笔者的《深入浅出 SPA/MPA》。

2. 实现一个用于解析查询参数函数

/**
 * 解析查询参数字符串为对象
 * @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;
}