编辑“︁JavaScript BOM基础”︁（章节）

= JavaScript BOM基础 =

== 介绍 ==
'''浏览器对象模型'''（Browser Object Model，简称BOM）是JavaScript与浏览器交互的核心API集合，它允许开发者控制浏览器窗口、导航、历史记录、屏幕等对象。BOM不是W3C标准，但所有主流浏览器都实现了类似的接口。与DOM（文档对象模型）不同，BOM操作的是浏览器本身而非文档内容。

== BOM核心对象 ==
以下是BOM的主要对象及其作用：

{| class="wikitable"
|-
! 对象 !! 描述
|-
| <code>window</code> || 浏览器窗口的顶层对象，所有全局变量和函数都是其属性。
|-
| <code>navigator</code> || 提供浏览器厂商、版本、操作系统等信息。
|-
| <code>location</code> || 管理当前页面的URL（读取或重定向）。
|-
| <code>history</code> || 控制浏览器会话历史（前进/后退）。
|-
| <code>screen</code> || 获取用户屏幕分辨率、色彩深度等。
|}

== 详细说明 ==

=== window对象 ===
<code>window</code>是BOM的根对象，代表浏览器窗口。全局变量和函数实际上是<code>window</code>的属性和方法。

<syntaxhighlight lang="javascript">
// 示例：使用window对象
console.log(window.innerWidth); // 输出窗口内部宽度
window.alert("Hello BOM!");     // 弹出警告框
</syntaxhighlight>

=== navigator对象 ===
获取浏览器信息，常用于特性检测或兼容性处理。

<syntaxhighlight lang="javascript">
// 检测浏览器类型
console.log(navigator.userAgent); // 输出用户代理字符串
if (navigator.onLine) {
    console.log("用户在线");
}
</syntaxhighlight>

=== location对象 ===
操作URL，实现页面跳转或参数解析。

<syntaxhighlight lang="javascript">
// 重定向到新页面
location.href = "https://example.com";

// 解析URL参数
const params = new URLSearchParams(location.search);
console.log(params.get("id")); // 获取?id=123中的123
</syntaxhighlight>

=== history对象 ===
控制浏览器历史记录栈。

<syntaxhighlight lang="javascript">
// 后退一页
history.back();

// 前进两页
history.go(2);
</syntaxhighlight>

=== screen对象 ===
访问屏幕信息，适配响应式设计。

<syntaxhighlight lang="javascript">
console.log(`屏幕分辨率: ${screen.width}x${screen.height}`);
</syntaxhighlight>

== 实际案例 ==
'''场景：'''根据屏幕尺寸加载不同资源。

<syntaxhighlight lang="javascript">
if (screen.width < 768) {
    loadMobileVersion();
} else {
    loadDesktopVersion();
}
</syntaxhighlight>

== 高级应用 ==
=== 定时器 ===
BOM提供了<code>setTimeout</code>和<code>setInterval</code>方法：

<syntaxhighlight lang="javascript">
// 延时执行
setTimeout(() => {
    console.log("3秒后执行");
}, 3000);

// 循环执行
let counter = 0;
const timer = setInterval(() => {
    counter++;
    if (counter >= 5) clearInterval(timer);
}, 1000);
</syntaxhighlight>

=== 事件监听 ===
通过<code>window</code>监听浏览器事件：

<syntaxhighlight lang="javascript">
window.addEventListener("resize", () => {
    console.log(`新窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
});
</syntaxhighlight>

== 关系图 ==
<mermaid>
graph TD
    window --> navigator
    window --> location
    window --> history
    window --> screen
    window --> document(DOM)
</mermaid>

== 注意事项 ==
* BOM方法可能因浏览器而异，需测试兼容性。
* 频繁操作<code>history</code>或<code>location</code>可能导致用户体验问题。
* 现代浏览器已限制部分<code>navigator</code>信息（如精确的插件列表）以保护隐私。

== 总结 ==
BOM是JavaScript控制浏览器的桥梁，掌握其核心对象（window、navigator等）能实现页面导航、设备适配等关键功能。建议结合DOM操作构建完整的Web应用。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]