【Java Web学习 | 第11篇】JavaScript(5)BOM

🌈 个人主页: Hygge_Code

🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络

💫 个人格言: “既然选择了远方，便不顾风雨兼程”

前言

BOM（Browser Object Model，浏览器对象模型）是 JavaScript 与浏览器交互的重要接口，它允许开发者控制浏览器窗口、处理导航、管理历史记录等。

一、BOM 基础

1. 什么是 BOM？

• BOM 是浏览器对象模型的缩写，用于操作浏览器本身的功能（如窗口、地址栏、历史记录等）。
• 与 DOM（操作网页内容）不同，BOM 聚焦于浏览器层面的交互，且没有统一的强制标准（但现代浏览器基本遵循 HTML 规范中对核心对象的定义）。

2. window 对象：BOM 的核心

window 是 BOM 的顶层对象，代表浏览器窗口，具有以下特点：

• 所有 BOM 对象都是 window 的属性（如 document、location 等）。
• 全局作用域中通过 var 声明的变量和函数，会自动成为 window 的属性和方法；而 let/const 声明的全局变量不会挂载到 window 上（ES6 特性）。
• 调用 window 的属性和方法时，可省略 window 前缀（如 alert() 等价于 window.alert()）。

示例：

// 验证 document 是 window 的属性
console.log(document === window.document); // 输出：true// 全局变量与 window 的关系
var username = "林七夜";
let age = 20; // let 声明的全局变量不会成为 window 属性
console.log(window.username); // 输出："林七夜"（var 变量挂载到 window）
console.log(window.age); // 输出：undefined

二、定时器

BOM 提供了两种定时器，用于延迟或周期性执行代码，是异步编程的基础工具。

1. 延时函数（setTimeout）

作用：延迟指定时间后执行一次回调函数。

语法：

// 语法：setTimeout(回调函数, 延迟毫秒数)
let timerId = setTimeout(function() {console.log("2秒后执行");
}, 2000);

清除延时函数：使用 clearTimeout(timerId) 取消未执行的延时任务：

// 清除延时器
clearTimeout(timerId);

注意：

• 延时函数是异步任务，会在同步代码执行完毕后再执行。
• 每次调用 setTimeout 都会生成一个新的定时器 ID，需单独清除。

2. 间歇函数（setInterval）

作用：每隔指定时间重复执行回调函数（周期性执行）。

语法：

let count = 0;
let intervalId = setInterval(function() {count++;console.log("第" + count + "次执行");// 执行5次后停止if (count >= 5) {clearInterval(intervalId);}
}, 1000);

两种定时器对比：

• setTimeout：执行一次（延迟后触发）。
• setInterval：重复执行（每隔指定时间触发）。

三、JS 执行机制：单线程与异步

JavaScript 是单线程语言（同一时间只能执行一个任务），为了处理耗时操作（如网络请求、定时器），引入了同步与异步机制。

1. 同步与异步

• 同步任务：在主线程上按顺序执行，前一个任务完成后才执行下一个（如普通代码、函数调用）。
• 异步任务：不阻塞主线程，由浏览器后台线程处理，完成后进入任务队列等待执行（如定时器、事件、资源加载）。

2. 事件循环（Event Loop）

JS 执行顺序遵循“事件循环”机制：

1. 先执行主线程中的同步任务，形成“执行栈”。
2. 异步任务完成后，被放入“任务队列”。
3. 当执行栈为空时，从任务队列中取出异步任务进入执行栈执行。
4. 重复以上步骤，形成循环。

示例：

console.log("1"); // 同步任务，先执行setTimeout(function() {console.log("2"); // 异步任务，最后执行
}, 0);console.log("3"); // 同步任务，第二个执行// 输出顺序：1 → 3 → 2

四、location 对象：控制页面地址

location 对象用于获取或设置当前页面的 URL，是实现页面跳转、参数获取的核心工具。

1. 常用属性与方法

功能	实现方式	说明
页面跳转	location.href = "URL"	跳转到指定 URL，会留下历史记录
获取 URL 参数	location.search	返回 ? 后的查询参数（如 ?id=1）
获取哈希值	location.hash	返回 # 后的哈希值（如 #my）
刷新页面	location.reload()	普通刷新（使用缓存）
强制刷新	location.reload(true)	忽略缓存，重新加载资源

2. 实例：刷新按钮

<button class="reload">刷新页面</button><script>const reloadBtn = document.querySelector(".reload");reloadBtn.addEventListener("click", function() {// 强制刷新页面location.reload(true);});
</script>

五、navigator 对象：获取浏览器信息

navigator 对象存储了浏览器的相关信息（如类型、版本、平台），常用于浏览器兼容性判断。

常用场景：检测设备类型

通过 navigator.userAgent（用户代理字符串）判断设备是 PC 还是移动端：

const userAgent = navigator.userAgent;
// 检测是否为移动端（匹配 Android、iOS 设备）
const isMobile = /Android|iPhone|iPad|iPod/i.test(userAgent);
console.log("是否为移动端：", isMobile);

注意：userAgent 可被修改，复杂场景建议结合其他检测方式（如屏幕尺寸）。

六、history 对象：管理浏览历史

history 对象用于操作浏览器的历史记录，实现前进、后退等功能，与浏览器地址栏的操作对应。

常用方法

方法	说明
history.back()	后退到上一页（同浏览器“后退”按钮）
history.forward()	前进到下一页（同浏览器“前进”按钮）
history.go(n)	跳转到相对当前页面的第 n 页（n=1 前进，n=-1 后退；n 超出范围时无效果）

实例：前进/后退按钮

<button class="back">后退</button>
<button class="forward">前进</button><script>const backBtn = document.querySelector(".back");const forwardBtn = document.querySelector(".forward");backBtn.addEventListener("click", function() {// 后退一页（等价于 history.back()）history.go(-1);});forwardBtn.addEventListener("click", function() {// 前进一页（等价于 history.forward()）history.go(1);});
</script>

总结

BOM 是 JavaScript 操作浏览器的核心接口，本文讲解了其核心知识点：

• window 是 BOM 的顶层对象，包含所有浏览器相关对象，且 var 声明的全局变量会成为其属性
• 定时器（setTimeout/setInterval）用于控制代码执行时机，是异步编程的基础
• JS 执行机制基于单线程和事件循环，区分同步与异步任务
• location 控制 URL 相关操作（跳转、刷新、参数获取）
• navigator 提供浏览器信息，用于兼容性判断
• history 管理浏览历史，实现前进、后退功能

---

如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！