JavaScript BOM 实战指南：让浏览器听你的指挥-编程学习网

浏览器对象模型 (BOM) 简介

BOM 是 JavaScript 的一个 API，它为访问和操作浏览器的原生对象和属性提供了一组接口。这些对象包括：

window 对象：代表浏览器窗口，提供对浏览器功能（例如导航、计时和验证）的访问。
document 对象：代表当前的 HTML 文档，允许对文档结构和内容进行操作。
navigator 对象：提供有关浏览器和操作系统的信息。
location 对象：表示当前文档的 URL 和位置信息。

实战演示

1. 导航浏览器

// 在新选项卡中打开一个 URL
window.open("https://example.com", "_blank");

// 重新加载当前页面
window.location.reload();

2. 操作浏览器历史记录

// 后退到浏览器的历史记录
window.history.back();

// 前进到浏览器的历史记录
window.history.forward();

3. 关闭浏览器窗口

// 关闭当前浏览器窗口（仅适用于 Chrome）
window.close();

4. 显示和隐藏元素

// 通过 className 隐藏元素
document.querySelector(".element").classList.add("hidden");

// 通过 id 显示元素
document.getElementById("element").classList.remove("hidden");

5. 事件处理

BOM 提供了事件处理功能，允许 Web 应用程序响应用户交互和浏览器事件。

// 为元素添加单击事件侦听器
document.querySelector("button").addEventListener("click", function() {
  alert("按钮被点击了！");
});

// 为窗口添加加载事件侦听器
window.addEventListener("load", function() {
  console.log("窗口已加载！");
});

6. 获取窗口尺寸

// 获取窗口的宽度和高度
const width = window.innerWidth;
const height = window.innerHeight;

7. 设置定时器和间隔

// 设置一个 5 秒后运行的定时器
setTimeout(function() {
  console.log("定时器已触发！");
}, 5000);

// 设置一个每秒运行的间隔
setInterval(function() {
  console.log("间隔已触发！");
}, 1000);