BOM 核心对象

系列文章目录

《JavaScript 基础与进阶笔记》（前期偏基础巩固与常见面试点，后续进入闭包、异步、工程化等进阶主题）

• 第 01 篇：数据类型与类型判断
• 第 02 篇：变量声明与作用域
• 第 03 篇：闭包与高阶函数
• 第 04 篇：函数工厂
• 第 05 篇：this 指向与绑定
• 第 06 篇：原型与原型链
• 第 07 篇：类与继承
• 第 08 篇：JS 执行机制与异步队列
• 第 09 篇：数组常用方法
• 第 10 篇：字符串算法
• 第 11 篇：常见手写题合集（上）
• 第 12 篇：常见手写题合集（下）
• 第 13 篇：Promise 与 async/await
• 第 14 篇：数据结构基础
• 第 15 篇：垃圾回收与内存
• 第 16 篇：DOM 基础全面解析
• 第 17 篇：DOM 性能与渲染
• 第 18 篇：DOM 交互补充
• 第 19 篇：DOM 实战案例
• 第 20 篇：CSS 布局与可视化高频
• 第 21 篇：移动端与 viewport
• 第 22 篇：BOM 核心对象（本文）

前言

DOM管页面节点；BOM（Browser Object Model，浏览器对象模型）管浏览器窗口与环境——地址栏 URL、前进后退、设备信息、定时器等。日常与面试最高频的四个对象：window、location、navigator、history。本篇按对象展开常用 API 与易混点；pushState与 SPA 路由的完整串联放在下一篇「前端路由原理」。

一、BOM 与 DOM 的关系

window（全局对象 + BOM 根） ├── document → DOM 根（HTML 文档） ├── location → 当前 URL ├── navigator → 浏览器/设备信息 ├── history → 会话历史栈 ├── screen → 屏幕信息 └── setTimeout / alert / open …（挂在 window 上的全局 API）

• 浏览器中window既是BOM 顶层，也是JS 全局对象（非严格模式下，全局变量即window属性）。
• document是window的子对象，代表 DOM；第 16 篇已详述 DOM API。
• 说「操作 BOM」常指改 URL、读 UA、控制历史记录等与页面内容无关的浏览器能力。

二、window

2.1 尺寸与滚动

// 滚动到底部（内容高度 - 视口高度）consttoBottom=()=>{window.scrollTo({top:document.documentElement.scrollHeight-window.innerHeight,behavior:"smooth",});};

2.2 对话框与开窗

window.alert("提示");constok=window.confirm("确认删除？");constname=window.prompt("请输入姓名","默认值");// 新窗口（常被拦截）；noopener 防 tabnabbingconstw=window.open("https://example.com","_blank","noopener,noreferrer");

2.3 定时器（与第 8 篇事件循环衔接）

constid=setTimeout(()=>console.log("一次"),1000);clearTimeout(id);constid2=setInterval(()=>console.log("重复"),1000);clearInterval(id2);

setTimeout回调是宏任务；精度受主线程阻塞影响，不能当精确时钟。

2.4 事件

window.addEventListener("load",()=>{/* 资源（含图片）加载完 */});window.addEventListener("DOMContentLoaded",()=>{/* DOM 树解析完，不必等图片 */});window.addEventListener("resize",onResize);window.addEventListener("scroll",onScroll,{passive:true});

load晚于DOMContentLoaded。滚动监听建议passive: true（第 18 篇），提示浏览器不会preventDefault，利于性能。

三、location

location描述当前文档 URL，既可读也可写（赋值会导航）。

3.1 常用属性

假设 URL：https://example.com:8080/path/page?id=1&tab=2#section

constparams=newURLSearchParams(location.search);params.get("id");// "1"params.set("tab","3");constnewUrl=`${location.pathname}?${params.toString()}${location.hash}`;history.replaceState(null,"",newUrl);// 改参不刷新（见 §五）

3.2 导航方法

location.href="https://example.com/login";// 等价 assign，会导航

易混：改location.hash会触发hashchange（Hash 路由用）；改pathname整页刷新，除非配合 History API。

四、navigator

navigator提供浏览器与运行环境信息（只读为主）。

4.1 常用属性

navigator.userAgent;// UA 字符串（勿单独做可靠检测）navigator.language;// 如 "zh-CN"navigator.languages;// 偏好语言列表navigator.onLine;// 是否联网（不一定准）navigator.platform;// 已废弃倾向，少依赖navigator.cookieEnabled;

4.2 能力检测（推荐）

与其解析 UA，不如测 API 是否存在：

constcanShare="share"innavigator;constcanClipboard="clipboard"innavigator;constcanGeolocation="geolocation"innavigator;if(canGeolocation){navigator.geolocation.getCurrentPosition((pos)=>console.log(pos.coords),(err)=>console.error(err.code));}

4.3 其他（了解）

• navigator.clipboard.writeText()：剪贴板，需 HTTPS 或 localhost，常需用户手势。
• navigator.mediaDevices.getUserMedia()：摄像头/麦克风。
• navigator.serviceWorker：PWA，系列后续篇讲。

五、history

history管理同文档会话内的历史栈（前进/后退）。

5.1 基础 API

history.length;// 栈深度（含当前页，跨域页不可读详情）history.back();// 等价 history.go(-1)history.forward();history.go(-2);// 后退两页

5.2 pushState / replaceState（SPA 核心）

// 入栈：URL 变，不刷新；state 对象供 popstate 读取history.pushState({page:1},"","/users/1");// 替换当前条：不增加历史条数history.replaceState({page:1},"","/users/1");

三个参数：state（任意可结构化克隆对象）、title（多数浏览器忽略）、url（同源且一般仅改 path/search/hash）。

5.3 popstate（面试高频）

window.addEventListener("popstate",(e)=>{console.log(e.state);// 对应该历史条目的 state；首屏常为 nullrenderRoute(location.pathname);});

关键：

1. pushState/replaceState不会触发popstate。
2. popstate在用户点击前进/后退，或代码history.back()/go()时触发。
3. 因此 SPA 里：主动pushState后要自己更新视图；只有回退/前进时才靠popstate同步。

functionnavigate(path,state){history.pushState(state,"",path);renderRoute(path);// 必须手动渲染}window.addEventListener("popstate",()=>{renderRoute(location.pathname);// 浏览器后退时同步});

Hash 路由用hashchange而非popstate；对比见第 23 篇。

六、screen 与 document（简要）

screen.width;// 屏幕宽（设备像素逻辑值，因设备而异）screen.height;screen.availWidth;// 排除任务栏等document.title;// 改标签页标题document.hidden;// Page Visibility，标签是否隐藏document.visibilityState;// "visible" | "hidden" | "prerender"

标签页切到后台时可暂停动画、轮询，节省资源。

七、易混淆点归纳

1. window= 全局对象，var声明的全局变量是其属性；let/const全局不在window上。
2. innerWidth是视口；screen.width是整个屏幕，二者不同。
3. location.href = url会跳转；仅改参不刷新用history.replaceState+URLSearchParams。
4. pushState不触发popstate；手动改 URL 后要自己 render。
5. replaceStatevspushState：前者不增加「后退」步数，适合登录后跳首页。
6. Hash（#）变更走hashchange；History API改 path 走pushState+ popstate。
7. UA 嗅探不可靠；用特性检测（'geolocation' in navigator）。

八、思考与练习

1.BOM 和 DOM 分别管什么？

解析：BOM管浏览器窗口与环境（URL、历史、navigator 等）；DOM管文档节点树（document及元素 API）。

2.history.pushState({}, "", "/about")后页面会刷新吗？会触发popstate吗？

解析：不刷新；不触发popstate。需自行更新视图；用户点后退时才触发popstate。

3.location.replace和location.assign区别？

解析：replace替换当前历史记录，不能后退回到原页；assign可后退。

4.从https://a.com/list?page=2只把 query 改成page=3且不刷新，怎么做？

解析：URLSearchParams改参 +history.pushState或replaceState更新 URL，再自行拉取第 3 页数据。

5.为什么 scroll 监听建议{ passive: true }？

解析：告诉浏览器回调里不会preventDefault，可优化滚动性能（不阻塞合成线程等待 JS）。

总结

• window：视口尺寸、滚动、定时器、全局事件（load / scroll / resize）。
• location：URL 解析与跳转；改参不刷新配合History API。
• navigator：环境信息；优先特性检测而非 UA 字符串。
• history：pushState/replaceState改 URL 不刷新；popstate仅前进/后退时触发，SPA 需双向同步视图。

下一篇讲前端路由原理：Hash 与 History 模式、刷新 404 与服务端 fallback（系列第 23 篇）。