1：跳转页面
属性名：history.back()
谐音读音：黑斯特瑞 拜克
使用方法：history.back()
讲解属性作用：返回上一页，等同于浏览器左上角回退按钮
使用场景：详情页的返回按钮，弹窗关闭后返回上一页，多步骤表单，上一步按钮
使用图属性名：history.forward()
谐音读音：黑斯特瑞 佛沃得
使用方法：history.forward()
讲解属性作用：在浏览器历史记录里向前前进一页，模拟浏览器自带的前进按钮
使用场景：后台管理系统自定义导航条，多步骤表单，上一步、下一步
使用图属性名：history.go()
谐音读音：黑斯特瑞 勾
使用方法：history.go(1或者-1)
讲解属性作用根据传入的数字参数，在浏览器历史记录中跳转 n 步
使用场景：前进多步，回退多步，history.go (0) 刷新页面
使用图
2：screen /window 尺寸相关 API
1:screen.availWidth / availHeight
属性名：screen.availWidth谐音读音：斯哥rin,额维欧 维兹属性名：screen.availHeight谐音读音：斯哥rin,额维欧 海特
使用方法let width1 = screen.availWidth;
讲解属性作用:获取显示器屏幕除去任务栏之后的可用宽高，是硬件屏幕的尺寸，不是浏览器窗口
使用场景
弹窗居中计算（以整个显示器屏幕为基准居中）判断用户显示器分辨率，做大屏适配
使用图
2:window.innerWidth / window.innerHeight
属性名：window.innerWidth谐音读音：温豆,因呢 维兹属性名：window.innerHeight谐音读音：温豆,因呢 海特
使用方法:let windo = window.innerWidth
讲解属性作用:获取浏览器可视窗口（视口）的宽高，包含滚动条，不包含浏览器标题栏工具栏。窗口拖拽缩放，数值会跟着变。
使用场景:响应式 JS 判断：窗口小于768px切换移动端逻辑
监听resize窗口大小改变事件，窗口变化重新计算布局
使用图:3:offsetWidth /offsetHeight
属性名：offsetWidth 谐音读音：奥夫赛特 维兹属性名：offsetHeight谐音读音：奥夫赛特 海特
使用方法:let width2 = pop.offsetWidth;
讲解属性作用:获取元素实际渲染的宽高 = width + padding + border；不包含 margin。
使用场景:下拉菜单定位：拿到父盒子实际宽高，让下拉框和父盒子宽度对齐
JS 获取盒子真实大小，做动态布局使用图:
API 读值来源 包含内容 典型场景
screen.availWidth 显示器屏幕 屏幕除去任务栏 基于显示器弹窗居中、判断屏幕分辨率
window.innerWidth 浏览器视口 可视区 + 滚动条 JS 响应式、resize 监听、窗口居中
dom.offsetWidth DOM 元素 width+padding+border 获取盒子渲染大小，下拉浮层定位
3: window 窗口操作
属性名：window.open()谐音读音：温豆 欧喷
使用方法: let 变量名 = window.open()
讲解属性作用:JS 打开新浏览器窗口 / 新标签页，可以控制弹出窗口的宽高、位置。返回新窗口的 window 对象，newwin可以操作新窗口。
使用场景:打印预览、弹出独立预览窗口后台系统弹出子业务窗口
使用图:属性名：window.close()谐音读音：温豆 克楼兹
使用方法：
// 关闭当前页面
window.close()
// 关闭js打开的新窗口
let newwin = window.open(‘./xxx.html’)
newwin.close()
讲解属性作用：关闭浏览器窗口。 限制：JS 只能关闭由 window.open () 脚本打开的窗口；直接地址栏打开的页面，js 不能关闭，浏览器安全限制。
使用场景：子弹窗页面放关闭按钮
预览弹窗看完自动关闭
坑：普通标签页，直接调用window.close()浏览器会阻止，安全策略。
使用图：属性名：moveTo谐音读音：木夫 吐属性名：resizeTo谐音读音：瑞赛兹 吐
使用方法：open返回的值.moveTo(200,100)调整位置使用方法：open返回的值.resizeTo(800,600)控制页面大小
讲解属性作用：
moveTo(x, y)：移动浏览器窗口，窗口左上角定位到屏幕坐标 x,yresizeTo(w, h)：修改浏览器窗口的宽高
使用场景：后台系统弹出业务小窗口，自动定位 + 设置尺寸弹出预览窗口，统一窗口规格多窗口工具，多个弹窗错开摆放
使用图：
4:location 对象（地址栏 BOM）
1：属性名：location.hostname谐音读音：喽凯深 厚斯特内姆
使用方法console.log(location.hostname)
讲解属性作用：获取域名（主机名），不带端口。
使用场景后台管理系统区分多域名部署，判断当前访问的是哪个站点域名做域名白名单校验，判断用户是不是在指定域名下访问页面埋点统计，上报用户当前访问的网站域名
使用图2：属性名：location.pathname谐音读音：喽凯深 帕斯内姆
使用方法：console.log(location.pathname)
讲解属性作用：获取部分url 路径，域名后面的路径。
使用场景
侧边栏菜单高亮：根据浏览器路径匹配菜单，自动激活当前选中菜单页面路由判断，原生 JS 不使用框架时，根据路径加载不同页面模块
使用图3：属性名： location.port谐音读音：喽凯深 波特
使用方法：console.log(location.port);
讲解属性作用：获取端口号。
使用场景：
本地开发环境区分：本地开发经常用 8080、3000 端口，线上环境端口为空，用来区分本地 / 线上环境拼接完整跳转地址，手动组装 url 的时候需要拿到端口一起拼接
使用图：4：属性名： location.protocol谐音读音：喽凯深 普柔透扣
使用方法：console.log(location.protocol);
讲解属性作用：获取协议 http: 、https:，带冒号。
使用场景：根据不同域名做不同业务逻辑
拼接完整请求地址
使用图：5：属性名：location.href=““谐音读音：喽凯深 艾奇瑞夫
使用方法：location.href=””
讲解属性作用：
读：拿到完整的 url 地址写（赋值）：页面跳转，会新增历史记录，可以 back 回退
使用场景：
页面跳转，项目最常用,获取浏览器完整地址，复制链接功能
使用图：
6：属性名：location.assign()谐音读音：喽凯深 呃赛恩
使用方法：location.assign(页面路径)
讲解属性作用：页面跳转，新增一条历史记录，可以history.back()返回上一页。
使用场景：登录页点击登录跳转到首页；用户可以点返回退回到登录页。
使用图：
7：属性名：location.replace()谐音读音：喽凯深 瑞普雷斯
使用方法：location.replace(页面路径)
讲解属性作用：页面跳转，替换当前历史记录，不会新增历史。 跳转之后，不能 back 回到上一页。
使用场景：登录成功跳转首页，404 页面重定向，表单提交成功跳转，禁止退回到提交页
使用图：
两个都可以跳转页面他们的区别是什么
replace 当前页跳转无法通过back返回也无法通过浏览器返回键返回
assign 当前页跳转可以通过back返回也可以通过浏览器返回键返回
5：BOM 对话框
属性名：alert()谐音读音：呃勒特
使用方法：alert(’文字‘)
讲解属性作用：弹出提示框，只有一个【确定】按钮。没有返回值，阻塞代码，点确定之后代码才继续往下执行。
使用场景：
简单错误提示，调试测试用学习阶段练习提示用户信息
使用图：
属性名：confirm()谐音读音：肯佛姆
使用方法：let res = confirm(‘确定要删除吗？’)
讲解属性作用：
弹出弹窗，有【确定】、【取消】两个按钮。
点击确定，返回 true
点击取消，返回 false
使用场景：删除操作前二次确认，用户确认之后才执行删除逻辑。
使用图：
属性名：prompt()谐音读音：普朗普特
使用方法：let inputVal = prompt(‘请输入名字’,‘默认值’)
讲解属性作用：
弹窗，带输入框，有确定、取消按钮。
用户输入内容点确定：返回输入的字符串
用户点取消：返回 null
使用场景：
练习、demo 小案例，获取用户简单输入实际业务几乎不用，样式不能自定义，页面一般自己写 input 表单。
使用图：
