JavaScript 浏览器对象模型 BOM

浏览器对象模型（Browser Object Model，BOM）是指一组与浏览器进行交互的 JavaScript 对象。它允许 JavaScript 与浏览器的组件进行交互，比如窗口、文档、历史记录等。BOM 不同于 DOM（文档对象模型），后者专注于处理 HTML 和 XML 文档的结构和内容。下面是五个主要对象：

window 对象：表示浏览器的一个窗口，是 JavaScript 在浏览器环境中的全局对象。这意味着在全局作用域中定义的变量和函数实际上都是 window 对象的属性和方法。
location 对象：用于获取或改变当前文档的 URL，允许页面重定向；
navigator 对象：提供了关于浏览器的一些信息，包括用户代理信息、浏览器版本、用户的语言设置等。
screen 对象：提供了有关用户屏幕的信息，比如屏幕宽度、高度；
history 对象：用于访问浏览器的历史记录，可以用于前进、后退操作

window 对象

window 对象是 BOM 的核心，表示浏览器窗口或标签页。window 对象提供了一系列属性和方法：

window 对象属性

document：对 Document 对象的只读引用，用于访问页面的内容。
history：对 History 对象的只读引用，用于管理浏览历史。
innerHeight：返回窗口的文档显示区的高度（以像素为单位）。
innerWidth：返回窗口的文档显示区的宽度（以像素为单位）。
location：用于获取或设置窗口的 URL。
name：设置或返回窗口的名称。
outerHeight：设置或返回窗口的外部高度（包括工具栏和滚动条等界面元素）。
outerWidth：设置或返回窗口的外部宽度（包括工具栏和滚动条等界面元素）。
screenX：返回窗口在屏幕上的水平坐标。
screenY：返回窗口在屏幕上的垂直坐标。
navigator：包含大量有关 Web 浏览器的信息，用于检测浏览器及操作系统。

window 方法

alert(message)：显示一个带有指定消息和一个确定按钮的对话框。
confirm(message)：显示一个带有指定消息以及确定和取消按钮的对话框，并返回一个布尔值。
prompt(message, defaultValue)：显示一个带有指定消息、一个文本输入字段以及确定和取消按钮的对话框，并返回用户输入的文本（如果用户点击取消按钮，则返回 null）。
open(url, windowName[, windowFeatures])：打开一个新的浏览器窗口或标签页，并返回一个新的 Window 对象。
close()：关闭当前窗口。
setTimeout(function, delay)：在指定的延迟（以毫秒为单位）后调用一个函数或计算一个表达式。
setInterval(function, delay)：按照指定的周期（以毫秒为单位）调用一个函数或计算一个表达式。

location 对象

Location 对象是浏览器的一个重要组成部分，它提供了关于当前文档的 URL 的信息并允许你进行 URL 的操作。

Location 对象属性

例子：https://www.csdn.net:8080/cdn/about.html?name=simahe#goods，属性可以取值，也可以设置值。

属性名	例子	描述
href	`https://www.csdn.net:8080/cdn/about.html?name=simahe#goods`	完整的 URL
protocol	https	页面使用的协议。 http 或 https
host	www.csdn.net:8080	域名+端口号（如果有）
hostname	www.csdn.net	不带端口的域名
port	8080	端口号，没有返回空字符串
pathname	cdn	URL 的目录或文件名
search	?name=simahe	URL 查询字符串，“?”开头
hash	#goods	返回 URL 中的 hash，没有返回空字符串

Location 对象的方法

assign(url)：加载新的文档,window.location.assign("csdn.com");
replace(url)：替换当前文档，window.location.replace("csdn.com");
reload()：重新加载当前文档,window.location.reload();

navigator 对象

navigator 对象提供了有关浏览器的信息。

navigator 对象属性

navigator.userAgent：可以用来检查浏览器类型，手机号类型。
navigator.language：获取浏览器语言，然后设置网站的语言，提升用户体验。
navigator.onLine：检查用户当前是否处于联网状态。
navigator.geolocation：获取地理位置信息

function getMobileModel() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    var mobileModel = "未知手机型号";
    if (/iPhone/i.test(userAgent)) {

    } else if (/Android/i.test(userAgent)) {
        mobileModel = "Android设备";
    }

    return mobileModel;
}

console.log(getMobileModel());

screen 对象

Screen 对象是浏览器的一个组成部分，用于提供有关用户屏幕的详细信息，如屏幕尺寸、颜色深度、分辨率等。这些信息可以帮助开发者获取有关用户环境的上下文，以优化布局和响应式设计。

screen 对象属性

screen.width：返回屏幕的宽度（单位：像素），包括任务栏或浏览器边框等。
screen.height：返回屏幕的高度（单位：像素），包括任务栏或浏览器边框等。
screen.availWidth：返回屏幕可用宽度，即除去任务栏或浏览器边框等后的宽度（单位：像素）。这个属性对于确定网页内容的最佳布局宽度非常有用。
screen.availHeight：返回屏幕可用高度，即除去任务栏或浏览器边框等后的高度（单位：像素）。这个属性可以帮助开发者确保网页内容在用户的屏幕上可见。
screen.colorDepth：返回显示屏幕的颜色分辨率（像素：比特）。这个属性可以帮助开发者了解用户设备的颜色显示能力，从而选择适当的图像和颜色方案。
screen.pixelDepth：返回目标设备或缓冲器上的调色板的比特深度，通常与 screen.colorDepth 相同。
screen.deviceXDPI 和 screen.deviceYDPI：分别返回显示屏幕的每英寸水平点数和每英寸垂直点数。这些属性对于了解用户设备的屏幕密度和物理尺寸非常有用。

screen 使用场景

响应式设计
设备适配和用户体验优化

// 使用 Screen 对象实现响应式设计
function adjustLayout() {
    if (screen.availWidth < 768) {
        document.body.style.backgroundColor = "lightblue";
    } else {
        document.body.style.backgroundColor = "white";
    }
}

// 监听页面加载和窗口大小变化
window.onload = adjustLayout;
window.onresize = adjustLayout;


if (screen.colorDepth > 24) {
    // 使用更高质量的图像
} else {
    // 使用低质量或优化过的图像
}

history 对象

history 对象保存着用户上网的历史记录，从窗口打开的那一刻算起。处于安全考虑,开发人员无法得知用户浏览过的 URL。

history 对象属性

history.length：返返回历史记录中条目的数量，包括当前页面。即用户访问的总页面数。
history.scrollRestoration：滚动恢复属性允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为
history.state：返回当前页面的 state 对象。这个属性在 HTML5 中引入，用于存储与当前历史记录条目相关联的状态对象。

history 主要方法

back()：会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。
forward()：会话历史中向前移动一页。
go(delta)：从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于 delta 参数的值。
pushState()：向浏览器的会话历史栈增加了一个条目。
replaceState()：用于更新会话历史栈条目。与 pushState()类似，但它不会新建一个，而是替换当前的。

history 使用场景

导航控制
状态管理
单页应用（SPA）：Vue-router 的 history 模式


history.go(-1) //-1,1,2
history.back()
history.forward()
if(history.length==0){
	//用户打开的第一个页面
}

history.pushState({ key: 'value' }, '', '/new-url');