浏览器 BOM 基础知识
🎯 引言
浏览器 BOM 是前端开发中非常重要的基础知识。学会 BOM，能帮你理解浏览器窗口和页面的相关操作，比如获得当前网页地址、操作浏览器历史记录、控制弹窗、管理定时器等功能。通过掌握这些内容，你可以让你的网页更加智能、更好地与浏览器环境进行交互，提升用户体验。
🌐 浏览器 BOM 是什么？
浏览器 BOM，英文全称是 Browser Object Model，指的是浏览器提供的一组对象，用来操作浏览器窗口和浏览器环境。它不属于 HTML 或 DOM 的一部分，但和网页的运行环境息息相关。
简单来说，BOM 就像浏览器给开发者准备的“遥控器”，让你可以控制浏览器的窗口、地址栏、浏览历史、定时器等。
🧭 BOM 的核心对象——window
浏览器中的所有 BOM 功能，都是挂载在 window 对象上的。
举个例子：
<!DOCTYPE html>
<html>
<head>
<title>BOM 示例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
pre {
background: #f4f4f4;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
</style>
</head>
<body>
<h2>查看当前页面标题</h2>
<button onclick="alert(window.document.title)">点击显示页面标题</button>
</body>
</html>
这里的 window.document.title 就是通过 window 访问当前页面的标题。实际上，我们写 document.title 也是可以的，浏览器会默认帮我们加个 window.。
🌍 常用 BOM 对象和属性介绍
1. location —— 获取和设置 URL 地址
window.location 是一个很重要的对象，它包含了当前网页的地址信息。你可以获得页面的 URL，也能用它跳转页面。
常用属性：
location.href：整个页面的 URLlocation.hostname：域名，比如www.example.comlocation.pathname：路径，比如/index.htmllocation.protocol：协议，比如https:
示例：
console.log(location.href); // 输出完整URL
console.log(location.hostname); // 输出域名
console.log(location.pathname); // 输出路径
跳转页面：
// 跳转到百度
location.href = 'https://www.baidu.com';
2. history —— 浏览器历史记录
window.history 对象用来操作浏览器的历史记录，可以实现前进、后退、刷新等功能。
常用方法：
history.back()：后退一页history.forward()：前进一页history.go(n)：跳转历史记录的第 n 页，n可以是正数或负数
示例：
// 后退一页
history.back();
// 前进一页
history.forward();
// 跳转到前两页
history.go(-2);
3. alert、confirm、prompt —— 弹窗操作
这三个方法也是 BOM 的一部分，可以方便地与用户进行交互。
alert(message)：弹出提示框confirm(message)：弹出确认框，返回 true 或 falseprompt(message, default)：弹出输入框，返回输入的内容
示例：
alert('欢迎光临！');
if (confirm('你确定离开吗？')) {
alert('再见！');
}
let name = prompt('请输入你的名字', '张三');
alert('你好，' + name);
4. navigator —— 浏览器信息
window.navigator 对象包含了浏览器的相关信息，比如浏览器名称、版本、操作系统等。
示例：
console.log('浏览器名称：' + navigator.appName);
console.log('浏览器版本：' + navigator.appVersion);
console.log('操作系统：' + navigator.platform);
5. screen —— 屏幕信息
window.screen 对象包含了用户屏幕的分辨率、宽高等信息。
示例：
console.log('屏幕宽度：' + screen.width);
console.log('屏幕高度：' + screen.height);
console.log('可用宽度：' + screen.availWidth);
console.log('可用高度：' + screen.availHeight);
⏰ BOM 定时器：setTimeout 和 setInterval
在网页开发中，时不时需要做一些延迟操作或重复执行任务，BOM 给我们提供了两个非常实用的定时器函数：
setTimeout(fn, delay)：延迟执行一次函数setInterval(fn, interval)：每隔指定时间执行函数
示例：
// 2秒后弹窗提醒
setTimeout(function () {
alert('2秒到了！');
}, 2000);
// 每隔1秒打印当前时间
setInterval(function () {
console.log(new Date().toLocaleTimeString());
}, 1000);
clearTimeout 和 clearInterval 来取消定时任务，避免造成不必要的性能浪费或内存泄露。🧾 小节总结
- BOM 是浏览器对象模型，主要通过
window操作浏览器环境，比如地址栏、历史记录、弹窗等。 - 常用 BOM 对象有
location、history、navigator、screen，以及弹窗方法alert、confirm、prompt。 - 定时器
setTimeout和setInterval方便实现延迟执行和周期任务，是前端开发中不可或缺的工具。
❓ 知识问答（Q&A）
Q：BOM 是什么，它和 DOM 有什么区别？
A：BOM（浏览器对象模型）是浏览器提供的操作浏览器窗口和环境的接口，主要是通过 window 对象，负责浏览器相关操作。DOM 是文档对象模型，专注于操作网页的内容和结构。两者关注点不同，但经常一起使用。
Q：如何通过 BOM 实现页面跳转？
A：可以通过设置 window.location.href 属性为新的 URL 来实现页面跳转，比如 location.href = "https://www.baidu.com";。
Q：什么情况下会用到 setInterval？
A：当你想让某个操作每隔固定时间重复执行时，比如每秒更新一次时钟，或者轮播图自动切换，就会用到 setInterval。
🧪 小练习
练习1：获取并显示当前网址的域名和路径
<!DOCTYPE html>
<html>
<head>
<title>BOM练习1</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#info {
margin-top: 20px;
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<h3>显示当前网页的域名和路径</h3>
<button id="btn">显示地址信息</button>
<div id="info"></div>
<script>
document.getElementById('btn').onclick = function () {
// 在这里写你的代码，显示网页域名和路径
};
</script>
</body>
</html>
练习2：使用定时器实现每秒显示当前时间，并提供按钮停止计时
<!DOCTYPE html>
<html>
<head>
<title>BOM练习2</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#time {
font-size: 20px;
color: #007acc;
}
button {
margin-top: 10px;
padding: 5px 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h3>每秒显示当前时间，点击按钮停止</h3>
<div id="time">--:--:--</div>
<button id="stopBtn">停止显示时间</button>
<script>
var timer = setInterval(function () {
var now = new Date();
document.getElementById('time').textContent = now.toLocaleTimeString();
}, 1000);
// 在这里编写你的代码，停止时间显示。
</script>
</body>
</html>
🎉 恭喜你已经掌握了浏览器 BOM 的基本操作，window 对象的使用，location、history、navigator、screen，以及定时器 setTimeout 和 setInterval 的技能啦！继续练习，你会成为更棒的前端开发者！