BOM 浏览器对象模型：从 window 开始，理解浏览器环境
在JavaScript的世界里，我们经常听到DOM（文档对象模型），但还有一个同样基础且重要的概念，就是BOM（浏览器对象模型）。简单来说，BOM提供了与浏览器窗口本身进行交互的方法和接口，而DOM则专注于操作页面内的HTML文档内容。
核心：顶层的 window 对象
BOM的核心，或者说它的“根”，就是 window 对象。在浏览器中，window 对象是一个全局对象，它代表了整个浏览器的窗口或标签页。这意味着，我们平时使用的很多功能，其实都是这个 window 对象的“子功能”。
一个直观的体验：
我们在页面上经常用弹窗来提示用户信息。通常可以这样写：
window.alert("这是一个提示信息，来自代码号学习编程");
但因为你已经处于 window 这个全局环境下，所以 window 可以省略，直接写：
alert("效果一样，这是更简洁的写法");
这个小小的例子就能看出，window 对象在BOM中的“老大”地位。几乎所有与浏览器窗口相关的操作，最终都可以追溯到它身上。
window 对象下的“得力干将”
window 对象自身包含了很多属性和方法，但它更像一个容器，下面挂载着许多我们项目开发中频繁打交道的子对象。这些子对象共同构成了BOM的实用功能。比如：
-
document: 这个应该最熟悉了，它代表了当前窗口加载的HTML文档，是DOM的入口。通过它，我们才能操作网页的结构、样式和内容。
-
history: 这个对象让我们可以访问浏览器的历史记录，实现页面的前进、后退等操作。
-
location: 它掌管着当前窗口的URL地址信息。我们不仅可以获取当前的网址，还能用它来跳转页面或刷新页面。
-
navigator: 通过它，我们可以获取到关于浏览器的信息，比如浏览器名称、版本、操作系统等，常用来做设备或浏览器兼容性判断。
-
screen: 这个对象提供了关于用户屏幕的信息，比如屏幕的宽度、高度、可用工作区等。
个人见解： 初学者容易混淆 window.screen 和 window.innerWidth。前者是获取显示器屏幕的物理分辨率信息，后者是获取浏览器窗口当前的可视区域大小。在响应式布局调试时，innerWidth 和 innerHeight 的用处更大，它们直接反映了用户当前能看到的内容区域尺寸，而不是整个屏幕的大小。
深入一点：location 对象实例
光说概念有点虚，咱们用一个实际例子来看看BOM怎么帮我们处理页面地址。假设我们想获取当前页面的完整URL，或者想跳转到一个新页面。
示例：获取并解析当前页面地址
// 获取当前页面的完整URL
let currentUrl = window.location.href;
console.log("当前页面地址是: " + currentUrl);
// 获取当前页面的主机名（域名+端口）
let hostName = location.hostname;
console.log("当前主机名是: " + hostName);
// 获取当前页面的路径部分
let pathName = location.pathname;
console.log("当前路径是: " + pathName);
示例：页面跳转与刷新
// 模拟用户点击后跳转到新页面
function goToNewPage() {
// 通过设置 location.href 进行页面跳转
location.href = "https://www.ebingou.cn/biancheng/new-page.html";
// 也可以使用 location.assign("https://www.ebingou.cn/biancheng/new-page.html");
}
// 刷新当前页面
function refreshPage() {
// location.reload() 会重新加载当前页面，类似于点击浏览器的刷新按钮
location.reload();
}
本节课程知识要点
-
理解层级：
window是BOM的顶层对象，所有的BOM功能和DOM对象（如document）都是它的属性。 -
区分BOM与DOM：简单来说，BOM负责“窗子”（浏览器窗口），DOM负责“窗子里面的画”（网页文档）。两者协同工作，才构成了完整的Web应用。
-
核心子对象：重点掌握
document、location、history、navigator这四大对象的常用属性和方法，它们在日常开发中出现的频率较高。 -
注意全局性：由于
window是全局对象，它的属性和方法可以被直接访问，无需每次都写window.前缀。但理解其所属关系有助于写出结构更清晰的代码。
个人建议：在开发调试时，可以打开浏览器的控制台（按F12），直接输入 window 然后回车，你会看到一个巨大的对象树。试着展开它，找到 document、location、navigator 等，点开看看它们里面包含哪些信息。这种“动手探索”的方式，比单纯看文档更直观，也更容易记住。
BOM为我们提供了一个操作浏览器的“工具箱”，而 window 就是这个工具箱本身。理解它，能帮助我们更好地控制页面与用户浏览器之间的交互，写出更稳健、功能更完善的Web应用。
