JavaScript BOM 浏览器提供给 JavaScript 的一组 API
BOM 是 浏览器对象模型（Browser Object Model），它提供了 与浏览器窗口 进行交互 的 对象 和 方法。它是 JavaScript 运行在 浏览器环境中 的 重要扩展。
可以将 BOM 理解为是 浏览器 提供给 JavaScript 的 一组 API，用于 控制 浏览器 的 行为 和 获取 浏览器 相关的 信息。
BOM 的主要对象
1 window 对象
window 对象是 BOM 的 核心对象，它代表 浏览器的 一个窗口。在浏览器中，所有的 全局变量 和 函数 实际上都是 window 对象的 属性 和 方法。
它用于 操作 浏览器 窗口本身，如 改变窗口 大小、位置等。在现代浏览器中，由于 安全 和 用户体验 的原因，很多 窗口操作方法 受到限制。
还用于 控制 窗口的 滚动。window.scrollTo(x, y) 方法 可以将 窗口 滚动到 指定的 坐标位置，x 和y 分别是 水平 和 垂直 方向的 坐标。
宽度和高度属性
innerWidth 和 innerHeight
它们是 浏览器窗口的 内部宽度 和 高度（不包括 浏览器的 边框、菜单栏、工具栏 等）。这些属性是在 浏览器视口（viewport）的概念下 使用的，它们表示 用户实际看到 网页内容的 区域大小。
outerWidth 和 outerHeight
浏览器窗口的 整个外部尺寸，包括 浏览器的边框、菜单栏、工具栏等所有部分。这些属性的值取决于 浏览器的 具体设置 和 操作系统的 外观。
window.screen.width 和 window.screen.height
screen 对象 相关属性（与 屏幕尺寸 相关），它 返回 用户屏幕 的 宽度 和 高度（整个屏幕的 物理尺寸，而不是 浏览器窗口尺寸）。这在需要考虑 屏幕大小 来进行 布局优化 或者根据 屏幕分辨率 提供 不同内容 时很有用。
2 location 对象
location 对象 用于 获取 或 设置 当前窗口的 URL（Uniform Resource Locator）相关信息。
3 navigator 对象
navigator 对象 包含了 有关 浏览器 的 信息，还可以 获取 浏览器 的 语言偏好 等信息。
4 history 对象
history 对象 用于 操作浏览器的 历史记录。它允许用户 在历史记录中 前进 和 后退。
还可以使用 history.pushState(state, title, url) 方法 来向 历史记录中 添加 一个 新的状态。这在 单页应用（SPA）中很有用，通过 改变 URL 而 不进行实际的 页面刷新 来模拟 多页应用的 URL 行为。
state是一个与 新状态 相关的 对象；title是 页面标题（目前大多数浏览器忽略这个参数）；url是新的 URL。
BOM 的事件
BOM 还涉及到一些与 浏览器 相关的 事件。
window.onload 事件
当 整个页面（包括 所有的外部资源，如图片、脚本等）加载完成后 会触发 这个事件。可以在这个事件中 编写代码来 初始化页面。
// 示例代码 1
window.onload = function() {
// 在这里执行页面加载完成后的初始化操作
var element = document.getElementById("myElement");
element.style.color = "red";
};
window.resize 事件
当 浏览器窗口大小 发生变化时 会触发。可以利用这个事件来 调整页面布局 或 元素的 大小，以 适应窗口的 变化。
// 示例代码 2
window.onresize = function() {
var width = window.innerWidth;
var height = window.innerHeight;
console.log("窗口大小已改变，新宽度为：" + width + "，新高度为：" + height);
};
