编程语言
首页 > 编程语言> > JavaScript中阶 BOM 浏览器对象模型(Browser Object Model)

JavaScript中阶 BOM 浏览器对象模型(Browser Object Model)

作者:互联网

提供了独立于HTML页面内容,而于浏览器相关的一系列对象,主要用于管理浏览器窗口与窗口之间的通讯

BOM缺乏标准,HTML和DOM的标准化组织是W3C

浏览器内核

渲染引擎:用来渲染网页内容,将网页代码转为用户看到的页面

脚本引擎:执行JS代码(目前最快的是谷歌的V8)

引用方式

外部:在外部建立JS文件,通过 <script src='路径'></script>在HTML引入

内部:在HTML内部创建 <script>,在标签范围内书写JS代码

内嵌(行内)在HTML标签内部 直接书写JS代码

BOM六大对象

浏览器对象navigator

浏览器相关信息(名称、版本)

窗口对象window

由于BOM主要用于管理窗口与窗口间的通讯,所以核心对象就是window,是所有BOM对象的顶层对象

1、打开一个窗口,就包含了一个window对象

屏幕对象screen

显示屏幕相关信息(尺寸)

历史对象history

用户访问页面的历史信息

位置对象location

当前页面的地址信息

文档对象document

整个HTML文档页面

BOM与DOM

DOM实际上是属于BOM六大对象其中之一,由于document对象的属性和方法太多,所以被W3C单独拿出来做了一套规范,就叫做DOM

BOM :navigator,window,screen,history,location,document

对象的属性和方法

window对象的属性

Window 对象 | 菜鸟教程

属性描述
位置信息screenX、screenY 、screenLeft、screenTop(IE)返回浏览器相对于屏幕窗口的x.y坐标
pageXOffset,pageYOffset设置或返回当前页面相对于窗口显示区左上角的 X,Y 位置。
窗口大小innerHeight,innerwidth返回窗口的文档显示区的高度,宽度。
outerHeight,outerwidth返回窗口的外部高度,宽度,包含工具条与滚动条。

window对象的方法

Window 对象 | 菜鸟教程

方法描述code
对话框alert()显示带有一段消息和一个确认按钮的警告框。function myFunction(){ alert("你好,我是一个警告框!"); }
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。confirm("你好,我是一个确认框")
prompt()显示可提示用户输入的对话框。prompt("请输入你的名字","Harry Potter");
滚动条scrollBy(x,y)相对于当前滚动条的位置移动(值可叠加)
scrollTo(x,y)滚到到指定的坐标
新窗口open(url,target,features)打开新窗口open("XXX.html","","width=200,height=200")
窗口移动resizeBy(x,y)按照指定的像素调整窗口的大小。
resizeTo(x,y)把窗口的大小调整到指定的宽度和高度。
计时器**setInterval(callback,ms) clearInterval(callback,ms)按照指定的周期来调用或取消函数或计算表达式间隔型
setTimeout(callback,ms) clearTimeout(callback,ms)在指定的毫秒数后调用函数或计算表达式延时型且执行一次

   倒计时案例
   <script>
        let number = 60;
        let stop = setInterval(() => {
            if (number == 0) {
                clearInterval(stop)//当满足条件就可以停止计时函数
            }
            console.log(number--);//倒计时减减
        }, 1000)
    </script>

screen对象的属性**

属性描述
width,height返回屏幕的总宽高
availWidth,availHeight返回屏幕的可用宽高(减去界面特性,比如窗口任务栏)

history对象的方法

方法描述
back()跳转到上一个页面,回退按钮一样
forward()跳转到下一个页面,前进按钮一样
go()跳到指定页面,负数为后退,正数为前进,0不动

location对象的属性**

window.location和ducoment.location是同一个对象

属性描述
href获取或设置当前浏览器窗口的地址栏信息 location.href=xxxxx

navigator

标签:JavaScript,窗口,对象,Object,window,中阶,BOM,浏览器,页面
来源: https://blog.csdn.net/weixin_65257540/article/details/123256501