BOM是什么? BOM核心有哪些?可以实现哪些功能?

发布时间:2023年12月28日

??一、BOM是什么

BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。

  • BOM有一系列对象组成,是访问、控制、修改浏览器的属性的方法
  • BOM没有统一的标准(每种客户端都可以自定标准)。
  • BOM的顶层是window对象

总体来说,BOM主要针对的是浏览器窗口和子窗口,但是通常会把任何特定于浏览器的扩展都归于在BOM的范畴内。

??二、BOM的核心有哪些

BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象(例如screen对象、history对象等)都是该对象的子对象。

🧿window 对象——BOM核心

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。

window对象包括六个子对象:document,frames,history,location,navigator,screen

window常用的对象属性

属性说明
window包含了对窗口自身的引用。等价于self属性。
self返回对当前窗口的引用。等价于 Window 属性。
closed返回窗口是否已被关闭。
top返回最顶层的先辈窗口。
status设置窗口状态栏的文本。
pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent返回父窗口。
screenLeft只读整数。声明了窗口的左上角在屏幕上的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。
screenTop同上
screenX同上
screenY同上
defaultStatus设置或返回窗口状态栏中的默认文本。
innerheight返回窗口的文档显示区的高度。
innerwidth返回窗口的文档显示区的宽度。
length设置或返回窗口中的框架数量。
name设置或返回窗口的名称。
opener返回对创建此窗口的窗口的引用。
outerheight返回窗口的外部高度。
outerwidth返回窗口的外部宽度。

window对象常用方法

方法说明
onload()当页面完全加载到浏览器上时,触发该事件。
onscroll()当窗口滚动时触发该事件。
onresize()当窗口大小发生变化时触发该事件。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearTimeout()取消由setTimeout()方法设置的定时器。
vlearInterval()取消由setInterval()设置的定时器。

🍥Document对象

DOM 可以认为是 BOM 的一个子集,DOM 中文档操作相关对象,如:Node、Document、Element 等 DOM 节点类型对象,都是做为window对象的子属性出现的。

document 是 window 对象的子属性,它是一个 Document 对象实例,表示当前窗口中文档对象。通过该对象,可以对文档和文档中元素、节点等进行操作。

🎯Frames 对象

frames 对象是一个集合,表示当前页面中使用的子框架。如果页面中使用了框架,将产生一个框架集合 frames ,在集合中可以用数字下标(从0开始)或名字索引框架。集全中的每一个对象,包含了框架的页面布局信息,以及每一个框架所对应的 window 对象。

🥝Navigator 对象

navigator 是指浏览器对象,该对象提供了当前正在使用的浏览器的信息。navigator 对象中的属性是只读的,在 W3C 在HTML5 标准中,对该对象进行了规范。由于浏览器的同,该对象的具体值可能有所区别。

🧫History对象

history 对象来保存浏览器历史记录信息,也就是用户访问的页面。浏览器的前进与后退功能本质上就是 history 的操作。history 对象记录了用户浏览过的页面,通过该对象提供的 API 可以实现与浏览器前进/后退类似的导航功能。

📀Location对象

location是一个静态对象,该对象是对当前窗口URL地址的解析。该对象提供了可以访问URL中不同部分的信息属性,通过location对象也可以实现页面或锚点跳转等功能。

🍪Screen对象

screen对象中包含了用户显示器屏幕相关信息。通过该对象,可以访问用户显示器屏幕宽、高、色深等信息。

??三、BOM可以实现的功能

BOM的主要功能:

  • 弹出新浏览器窗口
  • 移动、关闭和更改浏览器窗口大小
  • 可提供Web浏览器详细信息的导航对象
  • 可提供浏览器载入页面详细信息的本地对象
  • 可提供用户屏幕分辨率详细信息的屏幕对象
  • 支持Cookie

总结:

BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!

?最后?

🍒欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言

文章来源:https://blog.csdn.net/qq_74095822/article/details/135270633
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。