Javascript 什么是BOM

小杰不会编程

已于 2023-12-31 20:36:14 修改

阅读量1.2k

点赞数 32

文章标签： javascript 开发语言

于 2023-12-31 12:35:02 首次发布

本文链接：https://blog.csdn.net/2201_75883077/article/details/135314715

版权

✨前言✨

1.如果代码对您有帮助  欢迎点赞👍+收藏⭐哟   后面如有问题可以私信评论哟🗒️
2.博主后面将持续更新哟😘

🎉本章目录🎉

☁️1.BOM是什么?
⛅2.BOM核心有哪些?
🌤️4.BOM由什么组成?
🌦️5.可以实现哪些功能?
🌦️6.总结

☁️1.BOM是什么?

在javascript中，BOM指的是浏览器对象模型（Browser Object Model），它提供了独立于内容而与浏览器窗口进行交互的对象，主要用于管理窗口与窗口之间的通讯，其核心对象是window。
BOM（Browser Object Model）即浏览器对象模型。

BOM提供了独立于内容而与浏览器窗口进行交互的对象；

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

此外，BOM还提供了一些方法，例如alert()、confirm()、prompt()等用于与用户进行交互的方法。

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

⛅2.BOM核心有哪些?

核心	说明
window 对象	表示浏览器窗口。它是 BOM 的核心对象，提供了浏览器窗口的各种方法和属性。
location 对象	表示当前文档的 URL 信息。它提供了访问和操作浏览器地址栏的方法和属性。
navigator 对象	对象：提供了浏览器的相关信息，如浏览器的名称、版本等。
screen 对象	提供了关于用户屏幕的信息，如屏幕尺寸、颜色深度等。
history 对象	表示浏览器的浏览历史记录，可以通过它来前进或后退到不同的页面。

这些 BOM 对象可以通过 JavaScript 来访问和操作，用于与浏览器进行交互，获取和修改浏览器的状态和信息。

🌤️4.BOM由什么组成?

1、BOM的组成结构
BOM：Brower Object Model，指的是浏览器对象模型。
作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。
浏览器对象：浏览器提供的一系列内置对象的统称。
BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。
在这里插入图片描述
window对象是BOM的顶层（核心）对象。
其他的对象都是以属性的方式添加到window对象下，也可称为window的子对象。

document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。
history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。
location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。
navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。
screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。

注意：
BOM没有一个明确的规范，所以浏览器提供商会按照各自的想法随意去扩展BOM。而各浏览器间共有的对象就成为了事实上的标准。不过在利用BOM实现具体功能时要根据实际的开发情况考虑浏览器之间的兼容问题，否则会出现不可预料的情况。

2、window对象
window对象：是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。
定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var area = 'Beijing';
        function getArea(){
            return this.area;
        }
        console.log(area);                   // 访问变量，输出结果：Beijing
        console.log(window.area);            // 访问window对象的属性，输出结果：Beijing
        console.log(getArea());              // 调用自定义函数，输出结果：Beijing
        console.log(window.getArea());       // 调用window对象的方法，输出结果：Beijing
        console.log(window.Number(area));    // 调用内置函数，将变量area转换为数值型，输出结果：NaN
    </script>
</head>
<body>
</body>
</html>

输出结果:
在这里插入图片描述
定义在全局作用域中的getArea()函数，函数体内的this关键字指向window对象。
对于window对象的属性和方法在调用时可以省略window，直接访问其属性和方法即可。

注意：
在JavaScript中直接使用一个未声明的变量会报语法错误，但是使用“window.变量名”的方式则不会报错，而是获得一个undefined结果。除此之外，delete关键字仅能删除window对象自身的属性，对于定义在全局作用域下的变量不起作用。

🌦️5.可以实现哪些功能?

1.控制浏览器窗口：可以打开、关闭、移动、调整大小浏览器窗口。

2.控制浏览器历史记录：可以向前或向后导航浏览器历史记录。

3.与浏览器通信：可以向浏览器发送消息并接收来自浏览器的消息。

4.检测浏览器信息：可以获取浏览器的名称、版本、分辨率等信息。

5.定时器：可以使用定时器函数来定时执行代码。

6.弹窗：可以使用弹窗函数来显示警告、确认或输入框。

7.定位：可以获取用户的地理位置信息。

8.存储：可以使用本地存储来保存数据。

9.屏幕信息：可以获取用户屏幕的宽度、高度、像素密度等信息。

10.Cookie管理：可以设置、读取和删除Cookie。

这些是JavaScript BOM的一些常见功能，可以帮助开发者控制和操作浏览器的各种行为和属性。

🌦️6.总结

核心	说明
window 对象	表示浏览器窗口。它是 BOM 的核心对象，提供了浏览器窗口的各种方法和属性。
location 对象	表示当前文档的 URL 信息。它提供了访问和操作浏览器地址栏的方法和属性。
navigator 对象	对象：提供了浏览器的相关信息，如浏览器的名称、版本等。
screen 对象	提供了关于用户屏幕的信息，如屏幕尺寸、颜色深度等。
history 对象	表示浏览器的浏览历史记录，可以通过它来前进或后退到不同的页面。
document对象	表示当前加载的网页，提供了操作和修改网页内容的方法和属性。

BOM还提供了一些其他的对象，用于处理浏览器事件、显示对话框、发送HTTP请求等功能。通过使用这些对象，JavaScript可以与用户交互，并且可以控制和操作浏览器窗口和网页内容。

小杰不会编程

关注

32
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Javascript 什么是BOM

核心说明window 对象表示浏览器窗口。它是 BOM 的核心对象，提供了浏览器窗口的各种方法和属性。location 对象表示当前文档的 URL 信息。它提供了访问和操作浏览器地址栏的方法和属性。navigator 对象对象：提供了浏览器的相关信息，如浏览器的名称、版本等。screen 对象提供了关于用户屏幕的信息，如屏幕尺寸、颜色深度等。history 对象表示浏览器的浏览历史记录，可以通过它来前进或后退到不同的页面。document对象。
复制链接

扫一扫