[分享]JavaScript的BOM操作

JavaScript BOM 操作详解

当你使用 JavaScript 开发网页应用时，除了操作页面内容（DOM），还需要与浏览器本身进行交互。BOM（Browser Object Model，浏览器对象模型） 就是 JavaScript 与浏览器对话的接口。

BOM 提供了操作浏览器窗口、历史记录、导航信息、屏幕属性等能力。与 DOM 不同，BOM 没有统一的标准，不同浏览器可能在细节上有所差异，但核心对象已被所有现代浏览器广泛支持。

一、什么是 BOM？

BOM 是浏览器提供的对象集合，用于访问和操作浏览器窗口及浏览器功能。它的核心是 window 对象，所有 BOM 对象和方法都从属于它。

BOM 主要包括以下核心对象：

对象	说明
window	浏览器窗口，BOM 的顶层对象
navigator	浏览器信息（如名称、版本、用户代理）
location	当前页面的 URL 信息
history	浏览器的历史记录
screen	用户屏幕的信息
document	当前页面文档（DOM 的入口，实际上属于 DOM，但可通过 window.document 访问）

二、window 对象

window 是 BOM 的顶层对象，代表浏览器窗口或标签页。全局变量和全局函数都自动成为 window 对象的属性。

// 全局变量自动成为 window 的属性
var name = "张三";
console.log(window.name);  // "张三"

// 全局函数也是 window 的方法
function sayHello() {
    console.log("你好");
}
window.sayHello();  // "你好"

// 以下写法实际上都是 window 的方法
alert("消息");            // 等同于 window.alert("消息")
setTimeout(() => {}, 1000); // 等同于 window.setTimeout

window 常用属性和方法

属性/方法	说明
window.innerWidth	浏览器窗口的可视宽度（包含滚动条）
window.innerHeight	浏览器窗口的可视高度
window.outerWidth	浏览器窗口的外部宽度（含工具栏等）
window.outerHeight	浏览器窗口的外部高度
window.screenX / window.screenY	窗口相对于屏幕左上角的坐标
window.open()	打开一个新窗口或标签页
window.close()	关闭当前窗口
window.alert()	弹出提示框
window.confirm()	弹出确认框（返回布尔值）
window.prompt()	弹出输入框（返回用户输入的字符串）
window.print()	打开打印对话框
window.scrollTo(x, y)	滚动到指定位置
window.scrollBy(x, y)	相对于当前位置滚动
window.getComputedStyle()	获取元素最终计算的 CSS 样式

三、窗口大小与滚动

获取窗口尺寸

// 浏览器可视区域大小（不含工具栏、状态栏等）
console.log(window.innerWidth);   // 视口宽度
console.log(window.innerHeight);  // 视口高度

// 浏览器整体窗口大小（含工具栏等）
console.log(window.outerWidth);
console.log(window.outerHeight);

控制窗口滚动

// 滚动到页面顶部
window.scrollTo(0, 0);

// 滚动到指定位置
window.scrollTo(100, 200);

// 使用平滑滚动
window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
});

// 相对于当前位置滚动 100px
window.scrollBy(0, 100);

// 获取当前滚动位置
let scrollX = window.pageXOffset;  // 水平滚动
let scrollY = window.pageYOffset;  // 垂直滚动
// 或使用
let scrollX = window.scrollX;
let scrollY = window.scrollY;

四、定时器

JavaScript 提供了两种定时器方法，用于在指定时间后执行代码。

1. setTimeout 与 clearTimeout

在指定的延迟时间（毫秒）后执行一次函数。

// 3秒后执行匿名函数
let timerId = setTimeout(function() {
    console.log("3秒已到！");
}, 3000);

// 取消定时器
clearTimeout(timerId);

2. setInterval 与 clearInterval

每隔指定的时间间隔重复执行函数。

let count = 0;
let intervalId = setInterval(function() {
    count++;
    console.log(`已运行 ${count} 秒`);
    
    // 10秒后自动停止
    if (count >= 10) {
        clearInterval(intervalId);
        console.log("定时器已停止");
    }
}, 1000);

五、对话框

JavaScript 提供了三种内置对话框，用于与用户进行简单交互。

1. alert —— 提示框

显示一条信息，用户只能点击"确定"关闭。

alert("这是一个提示信息");

2. confirm —— 确认框

显示信息并提供"确定"和"取消"按钮，返回布尔值。

let isConfirmed = confirm("确认删除此条目吗？");
if (isConfirmed) {
    console.log("用户确认删除");
} else {
    console.log("用户取消操作");
}

3. prompt —— 输入框

显示输入框，让用户输入内容，返回输入的字符串，点击取消则返回 null。

let name = prompt("请输入您的姓名：");
if (name !== null) {
    console.log(`你好，${name}！`);
} else {
    console.log("用户取消了输入");
}

六、location 对象

location 对象包含了当前页面的 URL 信息，既可以读取也可以修改。

location 的属性

console.log(location.href);      // 完整的 URL
console.log(location.protocol);  // 协议（http: 或 https:）
console.log(location.host);      // 主机名 + 端口号（如 example.com:8080）
console.log(location.hostname);  // 主机名（如 example.com）
console.log(location.port);      // 端口号
console.log(location.pathname);  // 路径部分（如 /page/index.html）
console.log(location.search);    // 查询参数（如 ?id=123&name=张三）
console.log(location.hash);      // 锚点部分（如 #section1）
console.log(location.origin);    // 协议 + 域名 + 端口（如 https://example.com）

location 的方法

// 跳转到新页面（相当于修改 href）
location.href = "https://example.com";
// 或使用 assign 方法
location.assign("https://example.com");

// 重新加载当前页面
location.reload();       // 从浏览器缓存加载
location.reload(true);   // 强制从服务器重新加载

// 替换当前页面（不会在历史记录中留下记录）
location.replace("https://example.com");

URLSearchParams —— 解析查询参数

使用 URLSearchParams 可以方便地解析和处理 URL 中的查询参数。

// 假设 URL 是 https://example.com/page?id=123&name=张三&active=true

let params = new URLSearchParams(location.search);

// 获取参数值
let id = params.get('id');        // "123"
let name = params.get('name');    // "张三"
let active = params.get('active'); // "true"

// 检查参数是否存在
if (params.has('id')) {
    console.log('存在 id 参数');
}

// 遍历所有参数
params.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

// 修改参数
params.set('page', '2');
params.append('sort', 'desc');
console.log(params.toString());   // "id=123&name=张三&active=true&page=2&sort=desc"

七、history 对象

history 对象用于操作浏览器的会话历史记录，可以实现页面间的前进、后退和跳转。

history 的方法

// 后退一页
history.back();

// 前进一页
history.forward();

// 后退或前进 n 步（负数后退，正数前进）
history.go(-2);   // 后退两页
history.go(1);    // 前进一页
history.go(0);    // 刷新当前页面

// 获取历史记录数量
console.log(history.length);

pushState 与 replaceState —— 修改历史记录

pushState 和 replaceState 可以在不刷新页面的情况下修改浏览器的 URL 和历史记录，是单页应用（SPA）路由的核心技术。

// pushState：添加一条新的历史记录
history.pushState(
    { page: 2, userId: 123 },  // 状态对象
    "页面标题",
    "/page/2"
);

// replaceState：替换当前历史记录
history.replaceState(
    { page: 1 },
    "新标题",
    "/page/1"
);

// 监听历史记录变化
window.addEventListener('popstate', function(event) {
    // 当用户点击浏览器前进/后退按钮时触发
    console.log('历史状态改变：', event.state);
});

八、navigator 对象

navigator 对象提供了关于浏览器的信息，常用于检测浏览器类型、操作系统、设备特性等。

navigator 的常用属性

// 浏览器用户代理字符串
console.log(navigator.userAgent);
// 示例: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"

// 浏览器名称
console.log(navigator.appName);

// 浏览器版本
console.log(navigator.appVersion);

// 操作系统平台
console.log(navigator.platform);

// 浏览器语言
console.log(navigator.language);   // "zh-CN"

// 是否启用 Cookie
console.log(navigator.cookieEnabled);

// 是否在线
console.log(navigator.onLine);     // true 或 false

检测设备与浏览器

// 判断是否为移动设备
function isMobile() {
    return /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
}

// 判断浏览器类型
function getBrowser() {
    let ua = navigator.userAgent;
    if (ua.indexOf('Chrome') > -1) return 'Chrome';
    if (ua.indexOf('Firefox') > -1) return 'Firefox';
    if (ua.indexOf('Safari') > -1) return 'Safari';
    if (ua.indexOf('Edge') > -1) return 'Edge';
    return 'Unknown';
}

九、screen 对象

screen 对象提供了用户屏幕的信息，可用于适配不同尺寸的显示设备。

// 屏幕总宽度和高度（含任务栏等）
console.log(screen.width);
console.log(screen.height);

// 屏幕可用宽度和高度（不含任务栏等系统区域）
console.log(screen.availWidth);
console.log(screen.availHeight);

// 屏幕色彩深度
console.log(screen.colorDepth);

// 屏幕像素比（如 Retina 屏幕为 2）
console.log(window.devicePixelRatio);

十、本地存储

BOM 提供了两种在浏览器中持久化存储数据的方式：localStorage 和 sessionStorage。

特性	localStorage	sessionStorage
生命周期	永久存储，除非手动清除	仅在当前会话有效，关闭标签页后清除
跨标签页	同源的所有标签页共享	仅当前标签页有效
容量	约 5-10 MB	约 5 MB

// 存储数据
localStorage.setItem('username', '张三');
sessionStorage.setItem('theme', 'dark');

// 读取数据
let username = localStorage.getItem('username');
let theme = sessionStorage.getItem('theme');

// 删除数据
localStorage.removeItem('username');
sessionStorage.removeItem('theme');

// 清空所有数据
localStorage.clear();
sessionStorage.clear();

// 存储对象（需要转为 JSON 字符串）
let user = { name: '张三', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
let storedUser = JSON.parse(localStorage.getItem('user'));

总结

BOM 是 JavaScript 与浏览器窗口和环境交互的桥梁。掌握 window、location、history、navigator、screen 以及本地存储等核心对象，可以让你更好地控制浏览器行为、管理页面导航、获取设备信息和存储用户数据。结合 DOM 操作，BOM 使你能够构建完整的、功能丰富的 Web 应用体验。在实际开发中，合理运用 BOM API 可以显著提升页面的可用性和交互体验。