系列文章目录《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 核心对象本文文章目录系列文章目录前言一、BOM 与 DOM 的关系二、window2.1 尺寸与滚动2.2 对话框与开窗2.3 定时器与第 8 篇事件循环衔接2.4 事件三、location3.1 常用属性3.2 导航方法四、navigator4.1 常用属性4.2 能力检测推荐4.3 其他了解五、history5.1 基础 API5.2 pushState / replaceStateSPA 核心5.3 popstate面试高频六、screen 与 document简要七、易混淆点归纳八、思考与练习总结前言DOM管页面节点BOMBrowser 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、控制历史记录等与页面内容无关的浏览器能力。二、window2.1 尺寸与滚动属性 / 方法含义innerWidth/innerHeight视口宽高含滚动条不含浏览器工具栏outerWidth/outerHeight整个浏览器窗口外框devicePixelRatio物理像素 / CSS 像素第 21 篇scrollX/scrollY页面已滚动距离别名pageXOffset/pageYOffsetscrollTo(x, y)滚动到指定位置scrollBy(dx, dy)相对当前再滚一段// 滚动到底部内容高度 - 视口高度consttoBottom(){window.scrollTo({top:document.documentElement.scrollHeight-window.innerHeight,behavior:smooth,});};2.2 对话框与开窗window.alert(提示);constokwindow.confirm(确认删除);constnamewindow.prompt(请输入姓名,默认值);// 新窗口常被拦截noopener 防 tabnabbingconstwwindow.open(https://example.com,_blank,noopener,noreferrer);2.3 定时器与第 8 篇事件循环衔接constidsetTimeout(()console.log(一次),1000);clearTimeout(id);constid2setInterval(()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利于性能。三、locationlocation描述当前文档 URL既可读也可写赋值会导航。3.1 常用属性假设 URLhttps://example.com:8080/path/page?id1tab2#section属性值href完整 URLprotocolhttps:hostexample.com:8080hostnameexample.comport8080pathname/path/pagesearch?id1tab2hash#sectionoriginhttps://example.com:8080constparamsnewURLSearchParams(location.search);params.get(id);// 1params.set(tab,3);constnewUrl${location.pathname}?${params.toString()}${location.hash};history.replaceState(null,,newUrl);// 改参不刷新见 §五3.2 导航方法方法行为location.assign(url)跳转可后退location.replace(url)跳转替换当前历史不可后退location.reload()刷新reload(true)强制跳过缓存已废弃写法了解即可location.hrefhttps://example.com/login;// 等价 assign会导航易混改location.hash会触发hashchangeHash 路由用改pathname整页刷新除非配合 History API。四、navigatornavigator提供浏览器与运行环境信息只读为主。4.1 常用属性navigator.userAgent;// UA 字符串勿单独做可靠检测navigator.language;// 如 zh-CNnavigator.languages;// 偏好语言列表navigator.onLine;// 是否联网不一定准navigator.platform;// 已废弃倾向少依赖navigator.cookieEnabled;4.2 能力检测推荐与其解析 UA不如测 API 是否存在constcanShareshareinnavigator;constcanClipboardclipboardinnavigator;constcanGeolocationgeolocationinnavigator;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.serviceWorkerPWA系列后续篇讲。五、historyhistory管理同文档会话内的历史栈前进/后退。5.1 基础 APIhistory.length;// 栈深度含当前页跨域页不可读详情history.back();// 等价 history.go(-1)history.forward();history.go(-2);// 后退两页5.2 pushState / replaceStateSPA 核心// 入栈URL 变不刷新state 对象供 popstate 读取history.pushState({page:1},,/users/1);// 替换当前条不增加历史条数history.replaceState({page:1},,/users/1);方法历史栈是否刷新pushState新增一条否replaceState替换当前条否location.assign新增整页导航是三个参数state任意可结构化克隆对象、title多数浏览器忽略、url同源且一般仅改 path/search/hash。5.3 popstate面试高频window.addEventListener(popstate,(e){console.log(e.state);// 对应该历史条目的 state首屏常为 nullrenderRoute(location.pathname);});关键pushState/replaceState不会触发popstate。popstate在用户点击前进/后退或代码history.back()/go()时触发。因此 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标签页切到后台时可暂停动画、轮询节省资源。七、易混淆点归纳window 全局对象var声明的全局变量是其属性let/const全局不在window上。innerWidth是视口screen.width是整个屏幕二者不同。location.href url会跳转仅改参不刷新用history.replaceStateURLSearchParams。pushState不触发popstate手动改 URL 后要自己 render。replaceStatevspushState前者不增加「后退」步数适合登录后跳首页。Hash#变更走hashchangeHistory API改 path 走pushState popstate。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?page2只把 query 改成page3且不刷新怎么做解析URLSearchParams改参 history.pushState或replaceState更新 URL再自行拉取第 3 页数据。5.为什么 scroll 监听建议{ passive: true }解析告诉浏览器回调里不会preventDefault可优化滚动性能不阻塞合成线程等待 JS。总结window视口尺寸、滚动、定时器、全局事件load / scroll / resize。locationURL 解析与跳转改参不刷新配合History API。navigator环境信息优先特性检测而非 UA 字符串。historypushState/replaceState改 URL 不刷新popstate仅前进/后退时触发SPA 需双向同步视图。下一篇讲前端路由原理Hash 与 History 模式、刷新 404 与服务端 fallback系列第 23 篇。