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

2022/3/3 22:18:41

编程Tag： javascript 对象浏览器页面 bom Object 窗口 window 中阶

本文主要是介绍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中阶 BOM 浏览器对象模型（Browser Object Model)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章