BOM【JavaScript】

BOM（Browser Object Model）是浏览器对象模型的缩写，它允许JavaScript与浏览器进行交互。BOM 提供了与浏览器窗口和框架相关的对象，使得开发者可以操作浏览器的各种功能。

BOM 的一些关键组成部分包括：
`window` 对象	表示浏览器窗口，是所有 BOM 对象的根对象。
`location` 对象	用于获取和设置当前文档的 URL，包含地址栏上的信息。
`navigator` 对象	包含关于浏览器的信息，例如浏览器名称和版本。
`history` 对象	用于管理浏览器的历史记录，可以实现前进和后退功能。
`document` 对象	虽然更常与 DOM 关联，但它也是 BOM 的一部分，代表当前加载的网页。

1. window对象

`1.1 alert`

功能：显示简单的信息，提示用户。
使用方式：alert('消息内容');
返回值：无，用户只能点击“确定”关闭对话框。
示例：alert('欢迎使用本系统！');

`1.2 confirm`

功能：询问用户是否确认某个操作。
使用方式：confirm('确认操作吗？');
返回值：返回 true 或 false，表示用户的选择。
示例：const isConfirmed = confirm('您确定要删除吗？');

`1.3 prompt`

功能：要求用户输入信息。
使用方式：prompt('请输入信息：');
返回值：返回用户输入的字符串，或 null（如果用户点击“取消”）。
示例：const userName = prompt('请输入您的名字：');

1.4 `setTimeout()`

setTimeout() 函数允许您在指定的毫秒数后执行一个函数或语句。它是非阻塞的，执行完成后不会继续阻塞代码的执行。

功能：在指定的延迟时间（以毫秒为单位）后执行一次特定的代码或函数。
例子：

1.5 `setInterval()`

setInterval() 函数以指定的毫秒数间隔来定期执行一个函数或语句。它是阻塞的，可以用来创建循环定时器。

功能：每隔指定的时间（以毫秒为单位）重复执行特定的代码或函数，直到调用 clearInterval() 终止它。
例子：

2. `location` 对象

在 JavaScript 中，location 对象用于表示当前文档的 URL，并提供了一些常用的方法和属性。以下是一些常用的方法和属性：

2.1 常用属性

href：获取或设置当前文档的完整 URL。
```
console.log(location.href);
```
protocol：获取当前 URL 的协议（如 http: 或 https:）。
```
console.log(location.protocol);
```
host：获取当前 URL 的主机名和端口号。
```
console.log(location.host);
```
hostname：获取当前 URL 的主机名。
```
console.log(location.hostname);
```
port：获取当前 URL 的端口号。
```
console.log(location.port);
```
pathname：获取当前 URL 的路径部分。
```
console.log(location.pathname);
```
search：获取当前 URL 的查询字符串（包括问号）。
```
console.log(location.search);
```
hash：获取当前 URL 的锚点（包括井号）。
```
console.log(location.hash);
```

2.2 常用方法

assign(url)：加载新的文档。

location.assign('https://example.com');

replace(url)：用新的文档替换当前文档，不会在历史记录中留下记录。
```
location.replace('https://example.com');
```
reload(force)：重新加载当前文档。如果 force 为 true，则强制从服务器加载。
```
location.reload();
```

2.3 使用示例

// 输出当前页面的 URL
console.log(location.href);// 跳转到新的 URL
location.assign('https://example.com');// 刷新当前页面
location.reload();

location对象的这些方法和属性可以帮助你在网页中处理 URL 和导航。

3. `navigator` 对象

navigator 对象是 JavaScript 中的一个重要组成部分，它提供了关于浏览器和用户环境的信息。以下是一些 navigator 对象的常用属性和方法：

3.1 主要属性

navigator.userAgent：返回一个字符串，包含浏览器的用户代理信息。通过这个字符串，你可以获取到浏览器的名称、版本及操作系统的信息。
navigator.language：返回用户首选的语言设置（例如 "en-US"）。这可以用于国际化应用程序。
navigator.onLine：返回一个布尔值，表示用户是否在线。
navigator.platform：返回操作系统平台的字符串（例如 "Win32"、"Linux x86_64"）。
navigator.geolocation：提供了获取用户地理位置信息的接口，但需要用户授权。

3.2 主要方法

navigator.sendBeacon(url, data)：用于异步发送小量数据到服务器，通常用于分析或监控。

3.3 示例

下面是一个简单的使用 navigator 对象的示例：

console.log("User Agent: " + navigator.userAgent);
console.log("Language: " + navigator.language);
console.log("Online Status: " + navigator.onLine);

3.4 注意事项

使用 navigator 对象获取的某些信息（如位置）可能需要用户的权限才能访问。
不同浏览器对 navigator 属性和方法的支持程度可能有所不同，因此在使用时应考虑兼容性。

4. history对象

history 对象是 JavaScript 中的一个重要部分，属于浏览器对象模型（BOM）。它用于操作浏览器的会话历史记录，让你能够在用户的历史记录中进行前进、后退和其他导航操作。以下是 history 对象的一些主要属性和方法：

4.1 主要属性

history.length：返回当前会话历史记录的条目数。

4.2 主要方法

history.back()：使浏览器返回到历史记录中的上一页，等同于点击浏览器的后退按钮。
history.forward()：使浏览器前进到历史记录中的下一页，等同于点击浏览器的前进按钮。
history.go(n)：根据传入的参数 n 导航到历史记录中的某个位置。例如，history.go(-1) 相当于 history.back()，history.go(1) 相当于 history.forward()。
history.pushState(state, title, url)：在历史记录中添加一个新的状态。可以用于单页应用（SPA）中进行 URL 的管理，而不重新加载页面。
history.replaceState(state, title, url)：修改当前的历史记录条目，而不添加新的条目。

4.3 示例

下面是一个简单的示例，演示如何使用 history 对象：

// 返回上一页
function goBack() {history.back();
}// 前往下一页
function goForward() {history.forward();
}// 跳转到历史记录中的某个条目
function goToPage(n) {history.go(n);
}