JavaScript BOM 详细介绍

JavaScript BOM (Browser Object Model) 详细介绍

BOM (Browser Object Model) 是浏览器对象模型，它提供了与浏览器窗口交互的对象和方法，允许 JavaScript 与浏览器"对话"。

1. BOM 概述

BOM 的核心是 window 对象，它代表浏览器窗口，同时也是 JavaScript 的全局对象。所有全局 JavaScript 对象、函数和变量都自动成为 window 对象的成员。

2. window 对象

2.1 属性和方法

常用属性：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• window.outerHeight - 浏览器窗口的外部高度
• window.outerWidth - 浏览器窗口的外部宽度
• window.screenX, window.screenY - 窗口相对于屏幕的位置
• window.pageXOffset, window.pageYOffset - 文档滚动的像素数
• window.location - 用于获取当前页面地址和重定向
• window.document - 对文档对象的引用
• window.history - 提供对浏览器历史记录的访问
• window.navigator - 提供浏览器相关信息
• window.screen - 提供用户屏幕的信息
• window.localStorage - 本地存储对象
• window.sessionStorage - 会话存储对象

常用方法：

• window.alert() - 显示带有一条消息和一个确认按钮的警告框
• window.confirm() - 显示带有一条消息、确认和取消按钮的对话框
• window.prompt() - 显示可提示用户输入的对话框
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.setTimeout() - 在指定的毫秒数后调用函数
• window.setInterval() - 按照指定的周期（毫秒）调用函数
• window.clearTimeout() - 取消由 setTimeout() 设置的 timeout
• window.clearInterval() - 取消由 setInterval() 设置的 interval
• window.scrollTo() - 滚动到文档中的特定位置
• window.requestAnimationFrame() - 告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画

2.2 示例代码

// 获取窗口尺寸
console.log(`窗口内部宽度: ${window.innerWidth}, 高度: ${window.innerHeight}`);// 定时器
let timer = setTimeout(() => {console.log('3秒后执行');
}, 3000);// 清除定时器
// clearTimeout(timer);// 间隔定时器
let counter = 0;
let interval = setInterval(() => {console.log(`每秒执行一次 ${++counter}`);if (counter >= 5) clearInterval(interval);
}, 1000);// 滚动到指定位置
window.scrollTo(0, 500);// 动画帧
function animate() {// 动画逻辑requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

3. location 对象

location 对象包含有关当前 URL 的信息。

3.1 属性和方法

属性：

• location.href - 返回当前页面的完整 URL
• location.protocol - 返回页面使用的协议 (http: 或 https:)
• location.host - 返回主机名和端口号
• location.hostname - 返回 web 主机的域名
• location.port - 返回 web 主机的端口
• location.pathname - 返回当前页面的路径和文件名
• location.search - 返回 URL 的查询部分（从问号 ? 开始的 URL）
• location.hash - 返回 URL 的锚部分（从 # 开始的 URL）

方法：

• location.assign() - 加载新文档
• location.reload() - 重新加载当前文档
• location.replace() - 用新文档替换当前文档（不会在历史记录中生成新记录）

3.2 示例代码

// 获取当前URL信息
console.log(`当前URL: ${location.href}`);
console.log(`协议: ${location.protocol}`);
console.log(`主机: ${location.host}`);
console.log(`路径: ${location.pathname}`);
console.log(`查询参数: ${location.search}`);
console.log(`哈希值: ${location.hash}`);// 重定向到新页面
// location.assign('https://www.example.com');// 替换当前页面（不会在历史记录中留下记录）
// location.replace('https://www.example.com');// 重新加载页面
// location.reload(); // 可能从缓存加载
// location.reload(true); // 强制从服务器重新加载

4. history 对象

history 对象包含用户访问过的 URL。

4.1 属性和方法

属性：

• history.length - 返回历史列表中的 URL 数量

方法：

• history.back() - 加载历史列表中的前一个 URL
• history.forward() - 加载历史列表中的下一个 URL
• history.go() - 加载历史列表中的某个具体页面

4.2 示例代码

// 获取历史记录长度
console.log(`历史记录数量: ${history.length}`);// 导航到前一页
// history.back();// 导航到后一页
// history.forward();// 导航到特定位置
// history.go(-2); // 后退两页
// history.go(1);  // 前进一页

5. navigator 对象

navigator 对象包含有关浏览器的信息。

5.1 常用属性和方法

属性：

• navigator.appName - 返回浏览器的名称
• navigator.appVersion - 返回浏览器的平台和版本信息
• navigator.userAgent - 返回由客户机发送服务器的 user-agent 头部的值
• navigator.platform - 返回运行浏览器的操作系统平台
• navigator.language - 返回浏览器的语言
• navigator.onLine - 返回浏览器是否在线
• navigator.geolocation - 返回一个 Geolocation 对象，可以访问设备的地理位置
• navigator.cookieEnabled - 返回浏览器是否启用 cookie
• navigator.hardwareConcurrency - 返回用户计算机可用的逻辑处理器核心数
• navigator.deviceMemory - 返回设备内存大小（GB）

方法：

• navigator.javaEnabled() - 返回浏览器是否启用 Java
• navigator.sendBeacon() - 用于异步发送少量数据到服务器

5.2 示例代码

// 浏览器信息
console.log(`浏览器名称: ${navigator.appName}`);
console.log(`浏览器版本: ${navigator.appVersion}`);
console.log(`用户代理: ${navigator.userAgent}`);
console.log(`操作系统平台: ${navigator.platform}`);
console.log(`浏览器语言: ${navigator.language}`);
console.log(`是否在线: ${navigator.onLine}`);
console.log(`是否启用cookie: ${navigator.cookieEnabled}`);
console.log(`CPU核心数: ${navigator.hardwareConcurrency}`);
console.log(`设备内存: ${navigator.deviceMemory}GB`);// 地理位置
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition((position) => {console.log(`纬度: ${position.coords.latitude}`);console.log(`经度: ${position.coords.longitude}`);},(error) => {console.error(`获取位置错误: ${error.message}`);});
} else {console.log('该浏览器不支持地理位置');
}// 发送Beacon数据
const data = { event: 'page_unload', time: Date.now() };
navigator.sendBeacon('/log', JSON.stringify(data));

6. screen 对象

screen 对象包含用户屏幕的信息。

6.1 常用属性

• screen.width - 返回屏幕宽度（像素）
• screen.height - 返回屏幕高度（像素）
• screen.availWidth - 返回可用屏幕宽度（像素，减去界面特性如窗口任务栏）
• screen.availHeight - 返回可用屏幕高度（像素，减去界面特性如窗口任务栏）
• screen.colorDepth - 返回颜色深度（每像素的位数）
• screen.pixelDepth - 返回屏幕的像素深度（每像素的位数）

6.2 示例代码

console.log(`屏幕宽度: ${screen.width}px`);
console.log(`屏幕高度: ${screen.height}px`);
console.log(`可用宽度: ${screen.availWidth}px`);
console.log(`可用高度: ${screen.availHeight}px`);
console.log(`颜色深度: ${screen.colorDepth}位`);
console.log(`像素深度: ${screen.pixelDepth}位`);

7. 存储对象

7.1 localStorage 和 sessionStorage

• localStorage - 存储没有过期时间的数据
• sessionStorage - 存储一个会话的数据（当浏览器标签页关闭时数据被删除）

方法：

• setItem(key, value) - 存储键值对
• getItem(key) - 获取指定键的值
• removeItem(key) - 删除指定键
• clear() - 清空所有存储
• key(index) - 获取指定索引的键名

7.2 示例代码

// localStorage 示例
localStorage.setItem('username', 'john_doe');
console.log(localStorage.getItem('username')); // 输出: john_doe
localStorage.removeItem('username');// sessionStorage 示例
sessionStorage.setItem('session_token', 'abc123');
console.log(sessionStorage.getItem('session_token')); // 输出: abc123
sessionStorage.clear();// 存储对象
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: Alice

8. 弹窗和对话框

8.1 常用方法

• alert(message) - 显示警告对话框
• confirm(message) - 显示确认对话框（返回 true/false）
• prompt(message, default) - 显示提示用户输入的对话框（返回输入值或 null）

8.2 示例代码

// 警告框
alert('这是一个警告消息');// 确认框
const isConfirmed = confirm('你确定要继续吗？');
console.log(`用户选择: ${isConfirmed}`);// 提示框
const userName = prompt('请输入你的名字', '匿名用户');
console.log(`用户输入: ${userName}`);

9. 定时器

9.1 定时器方法

• setTimeout(function, delay) - 在指定延迟后执行函数（返回定时器ID）
• setInterval(function, interval) - 每隔指定时间重复执行函数（返回定时器ID）
• clearTimeout(timeoutID) - 取消 setTimeout()
• clearInterval(intervalID) - 取消 setInterval()

9.2 示例代码

// setTimeout 示例
const timeoutId = setTimeout(() => {console.log('这段代码将在3秒后执行');
}, 3000);// 取消定时器
// clearTimeout(timeoutId);// setInterval 示例
let counter = 0;
const intervalId = setInterval(() => {console.log(`计数器: ${++counter}`);if (counter >= 5) {clearInterval(intervalId);console.log('定时器已停止');}
}, 1000);

10. 总结

BOM 提供了丰富的 API 让 JavaScript 可以与浏览器交互，包括：

1. 控制浏览器窗口（window）
2. 操作 URL（location）
3. 管理浏览历史（history）
4. 获取浏览器信息（navigator）
5. 获取屏幕信息（screen）
6. 客户端存储（localStorage/sessionStorage）
7. 显示对话框（alert/confirm/prompt）
8. 定时任务（setTimeout/setInterval）

掌握 BOM 是前端开发的重要部分，它使得 JavaScript 能够创建丰富的交互式网页应用。