bom

约 807 字大约 3 分钟

2026-06-06

手写笔记

一、计时器

1.1 BOM概念

Q：什么是BOM？
A：BOM即Browser Object Model（浏览器对象模型），以window为全局对象，提供操作浏览器窗口及相关功能的API。

⚠️ 核心笔记：计时器属于异步代码，当时机成熟之后才会执行；计时器会返回一个数字，该数值表示计时器的唯一编号。

1.2 计时器相关方法

setTimeout方法：指定时间到达后运行某个函数；clearTimeout方法：清除对应编号的单次计时器
setInterval方法：指定间隔时间到达后循环运行某个函数；clearInterval方法：清除对应编号的循环计时器

💡 课后作业：电子时钟、自动轮播图

二、作业讲解：计时器

2.1 作业内容

APM计算器
自动移动的div

三、作业讲解：弹窗风格

3.1 弹窗方法

window.open("页面路径","打开目标","配置")：打开新页面或弹窗
window.alert：普通提示弹窗，无返回值
window.confirm：确认弹窗，返回布尔值（确认返回true，取消返回false）
window.prompt：输入弹窗，返回用户输入的内容（取消返回null）

四、window对象

4.1 window.document

document.write：在当前文档流中写入内容，如果当前文档流已关闭，则会新开一个文档流并覆盖原有内容。

4.2 window.location 地址栏对象

属性	作用
`location.href`	包含完整URL，赋值可实现页面跳转
`location.protocol`	获取或设置URL的协议部分
`location.host`	获取或设置域名+端口号
`location.hostname`	获取或设置域名
`location.port`	获取或设置端口号
`location.pathname`	获取或设置路径部分
`location.search`	获取或设置URL参数（?开头部分）
`location.hash`	获取或设置哈希锚点（#开头部分）
`location.reload()`	重载刷新当前页面

4.3 window.console

console.log：打印普通内容与表达式返回值
console.dir：打印对象的完整结构
console.time() / console.timeEnd()：统计代码块的执行耗时

4.4 window.navigator

获取浏览器及设备的环境信息（如浏览器版本、操作系统、是否为移动设备等）。

4.5 window.history

history.go(n)：跳转到历史记录中的第n页（正数前进，负数后退）
history.back()：后退到上一页
history.forward()：前进到下一页

五、核心总结

BOM基础：BOM即浏览器对象模型，以window为全局对象，提供操作浏览器窗口及相关功能的API。
计时器：分为单次执行的setTimeout和循环执行的setInterval，均为异步任务，调用后返回唯一编号，通过对应的clearTimeout和clearInterval方法销毁。
弹窗系统：window.open用于打开新页面或弹窗；alert为普通提示弹窗；confirm为确认弹窗，返回布尔值；prompt为输入弹窗，返回输入内容。
核心对象：
- location：拆分URL各组成部分，通过href赋值实现页面跳转，reload实现页面刷新
- history：控制浏览器历史记录的前进与后退
- navigator：获取浏览器及设备环境信息
- console：提供控制台调试能力，支持日志打印、对象结构查看和代码耗时统计