一、认识 BOM
JavaScript BOM（Browser Object Model）是 JavaScript 中一组对象，它们提供了一个界面来与浏览器本身交互和控制浏览器环境。BOM 提供了各种功能，包括管理窗口、文档和导航。
二、窗口对象
窗口对象代表浏览器窗口本身。它提供了对窗口属性和方法的访问，如窗口大小、位置、标题和滚动位置。
// 获取窗口大小
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
// 设置窗口标题
window.document.title = "新标题";
// 滚动到页面顶部
window.scrollTo(0, 0);三、文档对象
文档对象表示当前 HTML 文档。它提供了对文档结构和内容的访问，包括元素节点、文本节点和属性。
// 获取文档元素
let bodyElement = document.body;
// 创建一个新元素
let newElement = document.createElement("div");
// 将新元素添加到文档中
bodyElement.appendChild(newElement);四、导航对象
导航对象提供了对浏览器历史和导航操作的控制。它允许你前进、后退、刷新和加载 URL。
// 前进到下一个历史记录条目
history.forward();
// 后退到上一个历史记录条目
history.back();
// 刷新当前页面
location.reload();
// 加载新 URL
location.href = "https://www.example.com";五、BOM 的实际应用
BOM 在实际应用中有着广泛的用途，如：
- 创建自定义弹出窗口：使用
window.open()方法创建新的浏览器窗口。 - 控制页面加载：使用
window.onload事件侦听器在页面加载完成后执行代码。 - 处理用户输入：使用
window.addEventListener()方法监听窗口事件，如click和keyup。 - 提供用户友好性功能：使用
window.scroll()方法平滑滚动到页面特定部分。
总结
掌握 JavaScript BOM 对于任何 Web 开发人员来说都是至关重要的。它提供了强大的功能，使你能够控制和定制浏览器环境，从而创建更动态和交互的 Web 应用程序。通过理解和利用 BOM，你可以驾驭浏览器之船，开启 Web 开发的新篇章。
