技术指南 | BOM API：浏览器操作的强大工具箱

2023-09-17 10:22:50

DOM 与 BOM 的区别

DOM（文档对象模型）允许 JavaScript 读取、修改和操作 HTML 文档的内容和结构。
BOM（浏览器对象模型）允许 JavaScript 访问和控制浏览器及其环境。

BOM API 之 Navigator 对象

Navigator 对象包含了大量关于用户浏览器及其环境的信息，包括：

浏览器名称和版本
操作系统和平台
语言设置
时区和日期
可用插件和扩展

例如：

console.log(navigator.userAgent); // 输出浏览器名称和版本
console.log(navigator.platform); // 输出操作系统和平台
console.log(navigator.language); // 输出语言设置

BOM API 之 Screen 对象

Screen 对象提供了关于用户屏幕的详细信息，包括：

屏幕宽度和高度
像素密度
可用颜色深度
屏幕方向

例如：

console.log(screen.width); // 输出屏幕宽度
console.log(screen.height); // 输出屏幕高度
console.log(screen.pixelDepth); // 输出像素密度
console.log(screen.orientation); // 输出屏幕方向

BOM API 之 Location 对象

Location 对象提供有关当前页面的 URL 信息，包括：

当前 URL
协议（如 http 或 https）
端口号
路径和查询字符串

例如：

console.log(location.href); // 输出当前 URL
console.log(location.protocol); // 输出协议
console.log(location.port); // 输出端口号
console.log(location.pathname); // 输出路径
console.log(location.search); // 输出查询字符串