JavaScript BOM编程

本文详细介绍了浏览器对象模型(BOM),包括其核心对象window的各种功能,如弹出对话框、窗口控制、窗体滚动、打印及定时器等。此外,还涵盖了History对象的历史记录操作和Location对象的URL信息处理。BOM在JavaScript中用于与浏览器窗口交互,提供了丰富的功能来提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、BOM概述

1.1、什么是BOM

​ BOM是browser object model的缩写,简称浏览器对象模型。

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

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

​ BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

​ BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。

​ BOM最初是Netscape浏览器标准的一部分。

1.2、BOM层次结构

​ window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

在这里插入图片描述

1.3、BOM可以实现的功能

​ BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。

但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!

二、Window对象

2.1、Window对象的使用

​ window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

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

​ 同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()。

示例:
​ ​ document.write(“www.dreamdu.com”);
​ ​ window.document.write(“www.dreamdu.com”);

​ 也就是说调用window对象的属性或方法可以省略window。

2.2、三种弹出框(重点)

1、alert():显示带有一段消息和一个确认按钮的警告框。
在这里插入图片描述

<script>
    alert("带一条消息和确定按钮的弹出框");
</script>

2、confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.返回值为布尔值;如果点击确定则返回true,点击取消返回false。

在这里插入图片描述

<script>
    confirm("带有一段消息以及确认按钮和取消按钮的对话框");
</script>

3、prompt():显示可提示用户输入的对话框。第一个参数是提示,第二个参数是默认值(可选);返回值为输入的值,取消返回null;需要注意的是,返回的输入值是一个string类型的数据。

在这里插入图片描述

<script>
    prompt("请输入您的姓名:",”例如:张三”);
</script>

2.3、窗体控制

1、open():打开一个窗体

​ 语法:window.open(URL,name,[specs]),该方法返回打开窗口的引用

​ 参数介绍:
​ ​ URL​ 可选。打开指定的页面的URL。如果没有指定URL,打开与新的空白窗口

​ ​ name​ 可选。指定窗口的名称。

​ ​ specs​ 一个逗号分隔的项目列表。支持以下值:

​ height=pixels​ 窗口的高度。最小.值为100

​ left=pixels​ 该窗口距离屏幕左侧的位置

​ top=pixels​ 该窗口距离屏幕顶部的位置

​ width=pixels​ 窗口的宽度.最小.值为100

​ 注:窗口相对位置是以屏幕为基准。

<script>
    window.open("page.html","newWind","width=520,height=420,left=100,top=30")
</script>

2、close():关闭浏览器窗口。

3、moveBy():可相对窗口的当前坐标把它移动指定的像素。
​ ​ window.moveBy(x,y)
​ ​ x​ 要把窗口右移的像素数,可以是正、负数值。
​ ​ y​ 要把窗口下移的像素数,可以是正、负数值。

4、moveTo():把窗口的左上角移动到一个指定的坐标。
​ window.moveTo(x,y)
​ ​ x​ 窗口新位置的 x 坐标,可以是正、负数值。
​ ​ y​ 窗口新位置的 y 坐标,可以是正、负数值。

5、resizeTo():把窗口的大小调整到指定的宽度和高度。
​ resizeTo(width,height)
​ ​ width​ 必需。想要调整到的窗口的宽度。以像素计。
​ ​ height​ 可选。想要调整到的窗口的高度。以像素计。
​ 注: 有最小值

6、resizeBy():按照指定的像素调整窗口的大小。
​ resizeBy(width,height)
​ ​ width​ 必需。要使窗口宽度增加的像素数。可以是正、负数值。
​ ​ height​ 可选。要使窗口高度增加的像素数。可以是正、负数值。
​ 注: 有最小值

7、focus():把键盘焦点给予一个窗口。可确保新的窗口得到焦点。

2.4、窗体滚动

1、scrollBy(xnum,ynum):按照指定的像素值来滚动内容。
​ ​ xnum​ 把文档向右滚动的像素数。
​ ​ ynum​ 把文档向下滚动的像素数。

<script type="text/javascript">
    function scrollWindow() {
        window.scrollBy(30,30)
    }
</script>

2、scrollTo(xpos,ypos):把内容滚动到指定的坐标。
​ ​ xpos​ 要在窗口文档显示区左上角显示的文档的 x 坐标。
​ ​ ypos​ 要在窗口文档显示区左上角显示的文档的 y 坐标。

<script type="text/javascript">
    function scrollWindow() {
        window.scrollTo(0,0)
    }
</script>

2.5、窗体打印

print():打印当前窗口的内容。

​ 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常,这会产生一个对话框,让用户可以取消或定制打印请求。

在这里插入图片描述

2.6、定时器(重点)

​ window对象中处理时间和间隔的函数有4个:setTimeout()函数、clearTimeout()函数、setInterval()、clearInterval()。

在这里插入图片描述

2.6.1、延时型定时器

在这里插入图片描述

​ setTimeout():定义延时定时器,在指定的时间后调用函数

语法:
​ ​ setTimeout(fun,time);

​ 其中参数fun:函数体或函数名;time指定时间,单位为毫秒。其返回值有一个id,代表当前的这个setTimeout()函数。

​ clearTimeout(id):清除延时定时器,取消指定id的setTimeout函数。
示范代码:

   setTimeout(function () {
        document.write("隔3秒后触发");
    }, 3000)    //在3秒后输出

    setTimeout(fun1, 5000);     //在5秒后输出

    function fun1() {
        document.write("函数名的方式5秒后触发");
    }

2.6.2、间隔型定时器

​ setInterval():定义间隔型定时器,在间隔指定的事件后重复调用函数。

语法:
​ ​ setInterval(fun1,time)

​ fun:函数体或函数名,time指定的时间,单位为毫秒。会返回一个值id。

​ clearInterval(id):清除间隔型定时器

​ 参数id是setInterval()函数返回的值,根据这个值可以停止返回值为idsetInterval()的执行。

​ 示范代码:

var h = setInterval(function () {
    document.write("3秒输出一次<br/>");
}, 3000);

​ 注意,JavaScript是单线程的,因此,这个定时函数实际上是通过插入执行队列的方式来实现。

2.6.3、动态时间效果

​ 由于涉及到时间的显示问题,所以要用到日期对象Date,还有时间在不停地走,因此需要不断地调用函数,所以要用到Windows的定时器setInterval( )方法。

<script>
function disptime(){
    var today = new Date(); //获得当前时间
    var hh = today.getHours();  //获得小时、分钟、秒
    var mm = today.getMinutes();
    var ss = today.getSeconds();
    document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
}
    window.setInterval(disptime,1000);
</script>

2.7、window对象常用属性(重点)

​ innerWidth​ 返回窗口的文档显示区的宽度。

​ innerHeight​ 返回窗口的文档显示区的高度。

​ name​ ​ 设置或返回窗口的名称。

​ outerheight​ 返回窗口的外部高度。

​ outerwidth​ 返回窗口的外部宽度。

三、History对象

​ History 对象包含用户(在浏览器窗口中)访问过的 URL。
​ History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

3.1、History对象属性

属性说明
length返回当前窗口历史列表中的网址数

3.2、History对象方法

方法说明
back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的下一个 URL
go(num)加载 history 列表中的某个具体页面

History对象:back() 方法
​ back() 方法可加载历史列表中的前一个 URL(如果存在)。
​ 调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

History对象:forward() 方法
​ forward() 方法可加载历史列表中的下一个 URL。
​ 调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

History对象:go() 方法
​ go() 方法可加载历史列表中的某个具体的页面。
​ 该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。

​ history.go(number|URL)

四、Location 对象(记)

​ Location 对象包含有关当前 URL 的信息。
​ Location 对象是 window 对象的一部分,可通过 window.location 属性对其进行访问。

4.1、Location对象属性

属性描述
hash返回一个URL的锚部分(锚点)
host返回一个URL的主机名和端口
hostname返回URL的主机名
href返回完整的URL
pathname返回的URL路径名。
port返回一个URL服务器使用的端口号
protocol返回一个URL协议
search返回一个URL的查询部分 ?之后

4.2、Location对象方法

方法说明
assign()载入一个新的文档 location.assign(URL)
reload()重新载入当前文档 location.reload();
replace()用新的文档替换当前文档 location.replace(newURL)

​ window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。

​ window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的

五、Screen 对象

​ Screen 对象包含有关客户端显示屏幕的信息。

属性说明
availHeight返回屏幕的高度(不包括Windows任务栏)
availWidth返回屏幕的宽度(不包括Windows任务栏)
colorDepth返回目标设备或缓冲器上的调色板的比特深度
height返回屏幕的总高度
pixelDepth返回屏幕的颜色分辨率(每像素的位数)
width返回屏幕的总宽度

六、Navigator 对象(记)

​ Navigator 对象包含有关浏览器的信息。

属性说明
appCodeName返回浏览器的代码名appCodeName 属性是一个只读字符串,声明了浏览器的代码名。在所有以 Netscape 代码为基础的浏览器中,它的值是 “Mozilla”。为了兼容起见,在 Microsoft 的浏览器中,它的值也是 “Mozilla”。
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值
platform返回运行浏览器的操作系统平台
userAgent返回由客户机发送服务器的user-agent 头部的值

说明:
​ 1.navigator.appCodeName:IE/Firefox/Chrome 系列浏览器中,它的值都是 “Mozilla”。
​ 2.navigator.appName:IE/Firefox/Chrome 系列浏览器中 均为 Netscape。

七、Frames对象

frames 属性返回窗口中所有命名的框架。
该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JTZ001

你的鼓励是我创作的最大动力?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值