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:提供控制台调试能力,支持日志打印、对象结构查看和代码耗时统计
