【js面试题】深入理解浏览器对象模型（BOM）

面试题：请你说说对bom的理解，常见的bom对象你了解哪些

引言：
浏览器对象模型（BOM）是JavaScript中用于与浏览器窗口及其内容进行交互的一组对象和方法。

BOM的核心是window对象，它代表了浏览器窗口本身，并且是全局对象。通过window对象，我们可以访问其他BOM对象，如location、navigator、screen和history。这些对象提供了丰富的接口，用于获取浏览器信息、控制浏览器窗口、导航历史记录等。本文将详细介绍这些BOM对象的概念、来源和代码示例。

是什么

BOM（Browser Object Model，浏览器对象模型）是JavaScript中用于与浏览器窗口及其内容进行交互的一组对象和方法。它不是ECMAScript标准的一部分，而是浏览器特有的，因此在不同的浏览器中可能会有所不同。BOM提供了与浏览器窗口及其内容进行交互的接口，允许开发者控制浏览器窗口、导航历史记录、获取浏览器信息等。

BOM的主要功能包括：

1. 窗口控制：通过window对象，可以控制浏览器窗口的大小、位置、状态栏、滚动条等。

2. 导航历史：history对象提供了浏览器历史记录的信息，允许开发者导航到前一个或后一个页面，或者跳转到历史记录中的特定页面。

3. 位置信息：location对象提供了当前URL的信息，并允许开发者改变浏览器的地址，实现页面的跳转。

4. 浏览器信息：navigator对象包含了有关浏览器的信息，如浏览器名称、版本、插件等。

5. 屏幕信息：screen对象提供了有关用户屏幕的信息，如屏幕宽度、高度、颜色深度等。

6. 对话框：BOM提供了alert、confirm和prompt等方法，用于显示对话框，与用户进行简单的交互。

7. 定时器：setTimeout和setInterval方法允许开发者设置定时器，执行代码在指定的时间后或以指定的时间间隔重复执行。

8. 事件处理：虽然事件处理不是BOM特有的，但BOM提供了事件监听和事件触发的机制，允许开发者响应用户操作，如点击、键盘输入等。

BOM的使用场景

• 页面跳转：使用location对象进行页面跳转或重定向。
• 弹窗提示：使用alert、confirm和prompt方法进行用户交互。
• 浏览器检测：使用navigator对象检测用户使用的浏览器类型和版本。
• 屏幕信息获取：使用screen对象获取屏幕尺寸，用于响应式设计。
• 定时任务：使用setTimeout和setInterval实现定时任务，如轮询服务器数据。

window对象

概念来源： window对象是BOM的核心，它代表了浏览器窗口本身，是全局作用域的载体。

代码示例：

// 打开一个新窗口
window.open('https://www.example.com', '_blank');

// 设置窗口标题
window.document.title = '新标题';

// 获取当前窗口的宽度和高度
var width = window.innerWidth;
var height = window.innerHeight;
console.log('窗口宽度：' + width + '，高度：' + height);

location对象

概念来源： location对象提供了当前URL的信息，并允许你改变浏览器的地址。

代码示例：

// 获取当前URL
var currentUrl = location.href;
console.log('当前URL：' + currentUrl);

// 重定向到新页面
location.href = 'https://www.example.com';

// 修改URL的特定部分
location.pathname = '/new-path';

navigator对象

概念来源： navigator对象包含了有关浏览器的信息，如浏览器名称、版本、插件等。

代码示例：

// 获取浏览器名称和版本
var browserName = navigator.userAgent;
console.log('浏览器名称：' + browserName);

// 检测是否支持某个特性
var supportsGeolocation = 'geolocation' in navigator;
console.log('浏览器支持地理位置：' + supportsGeolocation);

screen对象

概念来源： screen对象提供了有关用户屏幕的信息，如屏幕宽度、高度、颜色深度等。

代码示例：

// 获取屏幕宽度和高度
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log('屏幕宽度：' + screenWidth + '，高度：' + screenHeight);

// 获取屏幕颜色深度
var colorDepth = screen.colorDepth;
console.log('屏幕颜色深度：' + colorDepth + '位');

history对象

概念来源： history对象提供了浏览器历史记录的信息，允许你导航到前一个或后一个页面。

代码示例：

// 导航到历史记录中的前一个页面
history.back();

// 导航到历史记录中的后一个页面
history.forward();

// 导航到指定的历史记录页面
history.go(-2); // 向后移动两个历史记录页面

结论

BOM提供了与浏览器窗口及其内容进行交互的接口，而window对象是BOM的核心。通过window对象，我们可以访问location、navigator、screen和history等其他BOM对象，这些对象提供了丰富的接口，用于获取浏览器信息、控制浏览器窗口、导航历史记录等。掌握这些对象的使用对于开发动态的Web应用至关重要。

希望本文的介绍和示例能够帮助你更好地理解和运用BOM。