BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。
总体来说,BOM主要针对的是浏览器窗口和子窗口,但是通常会把任何特定于浏览器的扩展都归于在BOM的范畴内。
BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象(例如screen对象、history对象等)都是该对象的子对象。
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()设置的定时器。 |
DOM 可以认为是 BOM 的一个子集,DOM 中文档操作相关对象,如:Node、Document、Element 等 DOM 节点类型对象,都是做为window对象的子属性出现的。
document 是 window 对象的子属性,它是一个 Document 对象实例,表示当前窗口中文档对象。通过该对象,可以对文档和文档中元素、节点等进行操作。
frames 对象是一个集合,表示当前页面中使用的子框架。如果页面中使用了框架,将产生一个框架集合 frames ,在集合中可以用数字下标(从0开始)或名字索引框架。集全中的每一个对象,包含了框架的页面布局信息,以及每一个框架所对应的 window 对象。
navigator 是指浏览器对象,该对象提供了当前正在使用的浏览器的信息。navigator 对象中的属性是只读的,在 W3C 在HTML5 标准中,对该对象进行了规范。由于浏览器的同,该对象的具体值可能有所区别。
history 对象来保存浏览器历史记录信息,也就是用户访问的页面。浏览器的前进与后退功能本质上就是 history 的操作。history 对象记录了用户浏览过的页面,通过该对象提供的 API 可以实现与浏览器前进/后退类似的导航功能。
location是一个静态对象,该对象是对当前窗口URL地址的解析。该对象提供了可以访问URL中不同部分的信息属性,通过location对象也可以实现页面或锚点跳转等功能。
screen对象中包含了用户显示器屏幕相关信息。通过该对象,可以访问用户显示器屏幕宽、高、色深等信息。
BOM的主要功能:
总结:
BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!
?最后?
🍒欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言