JavaScript进阶(二):BOM对象详解
文章目录
- 前言
- 一、Window 对象
- 1、使用(调用)方式
- 2、Window 对象的方法
- 2.1 三个带弹出框的方法
- 2.2 与打开和关闭有关的方法
- 2.3 与定时器有关的方法
- 3、Window 对象的属性
- 二、Location对象
- 1、使用(调用)方式
- 2、Location方法
- 3、Location属性
- 三、History对象
- 1、使用(调用)方式
- 2、History方法
- 3、History属性
- 结语
前言
上一篇文章中,我们介绍了 BOM 的来源以及其组成部分,为了加深我们对 BOM 的理解,今天我们就将 BOM 中的对象都分析一遍。
下面,我们就开始吧。
从上一篇文章中,我们已经知道,BOM 主要由以下五大对象组成:
- Window 对象:浏览器窗口对象
- Navigator:浏览器对象
- Screen:浏览器所处客户端的显示器屏幕对象
- History:浏览器当前窗口的访问历史记录对象
- Location:浏览器当前窗口的地址栏对象
下面我们就将其中最重要的三大对象 Window、History 和 Location 对象进行分析。
一、Window 对象
1、使用(调用)方式
不同于一般的对象,BOM 中的 Window 对象不需要创建就可以直接使用,使用其中的方法直接调用即可,类似于我们已知的静态方法:
window.方法名();
比如我们最常用的一个方法,弹出一个警告框 alert:
window.alert("window弹出");
但由于在客户端 JavaScript 中,window 对象是全局对象,所有的表达式都在当前的环境中计算。要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。
也就是说,使用 window 对象中的方法可以不用带对象名,直接写方法名即可:
alert("no window弹出");
动图事例:
2、Window 对象的方法
2.1 三个带弹出框的方法
window 对象中,大致有三个方法为带弹出框的,其方法名和大致用法为:
方法名 | 用法 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
prompt() | 显示可提示用户输入的对话框。 |
其中,alert 我们在上面以及前面多次提到了,就不在赘述了,下面我们主要看后面的这两个方法。
首先是 confirm() 方法,其负责显示一个带确认取消按钮的对话框,基本用法为:
confirm("确定这样做吗");
演示:
可以看到,confirm 的确实现了带确认取消的弹窗。
但是也可以看到,无论我点击 confirm 中的 确认 还是 取消,好像都没有什么不同。事实上, confirm 方法会返回一个布尔值,当用户点击确定时返回 true,点击取消时返回 false。下面我们用一个例子演示:
var flag = confirm("确定这样做吗?");
if(flag){alert("是的");
}else{alert("不");
}
演示:
然后就是 prompt() 方法了,其负责显示一个具有输入框的弹出框,基本用法如下:
promt("输入点东西吧");
同样的,prompt 也具有返回值,返回的就是用户在输入框输入的信息。
注意,当点击输入框下方的取消时,无论你是否已经输入了信息,返回值都为 null
使用示例如下:
var text = prompt("输入点东西吧");
alert(text);
演示效果:
总的来说,这三个带弹出框的方法其实各有异同,他们三个使用的优先级为:
confirm > alert > prompt
更推荐大家使用 confirm,用户体验会更舒服。
2.2 与打开和关闭有关的方法
在 window 对象中,跟打开和关闭有关系,且我们最常用的方法有以下两个:
方法名 | 用法 |
---|---|
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
close() | 关闭浏览器窗口。 |
对于 open() 方法,其负责打开一个新的浏览器窗口,可以指定一个 URL 字符串在新窗口打开指定的网页地址。
其基本的用法如下:
//在新窗口打开百度
window.open("http://www.baidu.com");
ps: 请不要混淆方法 window.open() 与方法 document.open(),这两者的功能完全不同。为了使您的代码清楚明白,请使用 window.open(),而不要使用 open()。
open() 方法返回一个 window 对象,该 window 对象为新打开的浏览器窗口。
其次是 close() 方法,其负责关闭指定浏览器窗口,使用时需要指定要关闭的 window 对象,若不指定,则默认关闭当前页面所处的窗口。
其基本用法如下:
<body><input type="button" id="btn" value="打开新窗口"><input type="button" id="btnc" value="关闭打开的窗口">
</body>
<script>//open方法演示var eleBtn = document.getElementById("btn");var newwindow;eleBtn.onclick = function(){newwindow = window.open("http://www.baidu.com");}//close用法var eleBtnc = document.getElementById("btnc");eleBtnc.onclick = function(){newwindow.close();}
</script>
为了更清楚的显示出 close() 方法的用法,在这结合了 open() 方法的使用,close() 方法负责关闭 open() 方法所打开的窗口。
最终呈现效果:
2.3 与定时器有关的方法
定时器:类似闹钟,在一个规定的时间或者时间周期内执行
在 window 对象中,与定时器相关的方法共有四个,其方法名和大致描述如下:
方法名 | 用法 |
---|---|
setTimeout() | 在指定的毫秒数后调用函数或计算表达式(一次)。 |
clearTimeout() | 取消由 setTimeout() 方法设置的时间。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式(多次)。 |
clearInterval() | 取消由 setInterval() 设置的周期。 |
setTimeout():指定时间后执行1次(只执行一次)
setTimeout()
方法规定在指定的时间(毫秒)后执行指定的 JavaScript
代码,且仅 执行一次。
语法:
setTimeout(code,millisec);
//code 为指定要执行的JS代码
//millisec 为在执行代码前需要等待的时间(毫秒)
基本的用法为:
//在 3 秒后弹出一个警告框
setTimeout("alert('lololol');",3000);
//在 3 秒后弹出一个 confirm 对话框
相反地,clearTimeout()
则是取消由setTimeout()
设定的延迟执行的操作。
在一段 JavaScript 代码中,可能会同时出现多个setTimeout()
设定的定时器操作,和上文中的 close()
方法使用的情况类似,clearTimeout()
在使用时必须通过 id 值 指定某个特定的定时器。
而实际上, 每一个 setTimeout()
方法都会返回一个独特的 id 值,这个 id 值指代了这个定时器。
所以,我们可以使用其返回的这个id值来取消指定的setTimeout
定时器。
语法:
clearTimeout(id);
//id 值为特定的 setTimeout() 返回的 id 值
基本用法:
//在 3 秒后弹出一个警告框
var id = setTimeout("alert('lololol');",3000);
//取消该弹出操作
clearTimeout(id);
setInterval:指定每过一个时间间隔执行一次(多次执行)
假定这样一个情况:由于页面的数据需要实时性,所以每隔一段时间就需要刷新一次页面更新数据。
为了实现这个需求,我们就需要一个每隔一段时间自动执行的代码,它可以帮我们自动拉取并更新数据。
而 setInterval
方法的用法就是按照指定的周期(以毫秒计)来调用函数或计算表达式(循环调用)
语法 :
setInterval(code,millisec);
//code 为函数每个周期所执行的 JavaScript 代码
//millisec 指定每隔多少时间(毫秒)执行函数中的方法
返回值:一个 id 值,标识一个独立的定时器,此定时器由setInterval()方法创建
基本用法:
//每过 2s 向 html 文档中写入数字 2
setInterval("document.write('2');",2000);
如 setTimeout()
设定的定时器可以被 clearTimeout()
取消一样。setInterval()
设定的循环定时器也可以被取消,对应的取消方法为 clearInterval()
。
语法:
clearInterval(id);
//id 值为特定的 setInterval() 返回的id值
基本用法:
//每过 2s 向 html 文档中写入数字 2
var id = setInterval("document.write('2');",2000);
//过 4s 后取消循环写入数字 2 操作
setTimeout("clearInterval(id);",4000);
3、Window 对象的属性
从上篇文章中的图片中,我们可以清晰的看到,其实在 BOM 中,window 对象就已经包含了大部分的对象,而通过对 window 对象的属性访问,同样可以获取到其他的 BOM 对象的引用。
以下是各个 BOM 对象通过 window 对象获取的方式:
属性名 | 描述 | 通过window对象获取方法 |
---|---|---|
history | 对 History 对象的只读引用 |
window.history
|
location | 对 Location 对象的只读引用 |
window.location
|
navigator | 对 Navigator 对象的只读引用 |
window.navigator
|
screen | 对 Screen 对象的只读引用 |
window.screen
|
还有还有一个最重要的对象: document 对象,也是 window 对象的一部分。
也就是说,可以使用如下方法获取 document 对象的引用:
window.document;
在前面的点击切换图片的小案例中,我们使用了这个方法 : document.getElementByID()
。
其实也可以通过如下方式使用该方法:
window.document.getElementById();
我们一般都会将前面的 window 省去,就像 window 中的各种方法一样,直接使用。
但我们还是要了解,其实 无论是 BOM 还是 DOM,window 对象都是其核心。
二、Location对象
1、使用(调用)方式
location 对象代表浏览器窗口中的地址栏,和 window 对象一样,无需特殊的创建方式,通过对象名就可使用,并调用其中的方法:
location.方法名()
而由于 location 对象属于 window 对象的一部分,所以也可以这样写:
window.location.方法名();
2、Location方法
location 对象中的方法及用法如下:
方法名 | 方法描述 |
---|---|
assign() | 加载新的文档。 |
reload() | 重新加载当前文档。 |
replace() | 用新文档替换当前文档。 |
由于这三个方法使用都比较简单,就不细分叙述了,基本使用如下代码所示:
<body><input type="button" value="assign" id="assign"><input type="button" value="reload" id="reload"><input type="button" value="replace" id="replace"></body><script>/*** 加载新文档,参数为URL地址,会产生历史记录*/document.getElementById("assign").onclick = function(){location.assign("http://www.baidu.com");} /*** 重新加载文档,参数为一个布尔值,默认为false* 1.如该方法没有设定参数值或设定为false,那该方法会使用浏览器缓存来重新加载页面(浏览器默认刷新方式)* 2.如该方法参数值为true,那么该方法会无条件向服务器重新下载该文档并重新加载* */ document.getElementById("reload").onclick = function(){location.reload(true);}// /**// * 替换当前文档,和 assign 方法类似 // * 但是不会产生历史记录,也就是无法通过后退键返回上一个页面// */document.getElementById("replace").onclick = function(){location.replace("http://www.baidu.com");}</script>
效果演示:
3、Location属性
location 的属性如下:
属性 | 描述 |
---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
各个属性的用法描述中已经很清楚了,我就不详细赘述了。
这里只提一个常用的属性:href
,其功能为设置或返回完整的 URL 。
通过这个属性,我们可以获取浏览器地址栏的完整地址,或是设置地址为新地址,其用法如下:
<body><input type="button" value="href获取" id="href01"><input type="button" value="href设置" id="href02">
</body>
<script>/*** href 属性* 设置或返回完整URL* 当其设置一个新href时,其效果和assign()一样,加载新URL,并产生历史记录*/document.getElementById("href01").onclick = function(){alert(location.href);}document.getElementById("href02").onclick = function(){location.href = "http://www.baidu.com";}
</script>
效果演示:
三、History对象
特别注意:这里的 History 对象记录的历史记录只和当前窗口有关,并不是浏览器的全部历史记录。
1、使用(调用)方式
history 对象表示当前窗口的历史记录,同样通过对象名可以直接调用:
history.方法名();
history.属性名
history对象也属于 window 对象的一部分,所以也可以:
window.history.方法名();
window.history.属性名
2、History方法
在 history对象中,共有三个方法,它们分别为:
方法 | 描述 |
---|---|
back() | 加载当前窗口 history 列表中的前一个 URL。 |
forward() | 加载当前窗口 history 列表中的下一个 URL。 |
go() | 加载当前窗口 history 列表中的某个具体页面。 |
为了完成这三个方法的演示,我们需要两个html文档,第一个文档history00.html
核心内容为:
<body><a href="./history.html">去history对象页面</a>
</body>
第二个文档history.html
核心内容为:
<body><a href="http://www.baidu.com">打开一个页面</a><input type="button" value="goForward前进" onclick="goForward()"><input type="button" value="goBack后退" onclick="goBack()"><input type="button" value="go去后一个页面" onclick="go()">
</body>
<script>/*** forward()方法* 加载当前窗口历史列表的前一个页面* 类似于浏览器中的前进按钮* */ function goForward() {history.forward();}/*** back()方法* 加载当前窗口历史列表的后一个页面* 类似于浏览器中的后退按钮*/function goBack() {history.back();}/*** go()方法* 加载当前窗口历史列表的一个具体页面* 参数可以为一个URL或者一个数字,数字代表要访问的URL在历史记录的相对位置*/ function go() {//-1表示向后一个页面history.go(-1);}
</script>
效果演示:
3、History属性
history 对象只有一个属性:
属性 | 描述 |
---|---|
length | 返回浏览器历史列表中的 URL 数量。 |
用法:
history.length;
例子,在上面第二个html文档中添加:
<body><input type="button" value="获取历史记录数量" onclick="getLength()"></body><script>/***length属性* 显示当前窗口历史记录数量*/ function getLength() {alert(history.length);}<script>
演示:
结语
本节中所有使用的演示代码及资料都可以在我的github上找到,直达链接 : 点我跳转
本节,我们介绍了 BOM 对象中的各个对象以及各个对象中的相关方法和属性,我们算是对 BOM 有一个大概的认识了。
下节,我们开始 DOM 的学习,探究 DOM 这个强大的文档对象。
JavaScript进阶(二):BOM对象详解相关推荐
- javascript BOM对象详解
javascript BOM对象详解 目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
- Javascript中的Document对象详解
Document对象详解 document 文挡对象 - JavaScript脚本语言描述 -------------------------------------------- ...
- [Javascript]:BOM对象详解和BOM与DOM的层次关系
BOM与DOM的结构层次图 BOM对象是什么 BOM:浏览器对象模型(Brower Object Model),是用于操作浏览器而出现的API,BOM对象则是Javascript对BOM接口的实现. ...
- JavaScript中的window对象详解
1.window对象简介 (1)在JavaScript中,一个浏览器窗口就是一个window对象. (2)一个窗口就是一个window对象,这个窗口里面的HTML文档就是一个document对象,do ...
- Javascript进阶:匿名函数详解
匿名函数:意如其名,就是没有名字的函数. function (arg1,arg2){..... } 匿名函数的普遍用法: 1.赋值给变量: var func=function(arg1,arg2){. ...
- JavaScript核心之Document对象详解(document属性,方法)
目录 1 Document节点概述 2 document节点的属性 2.1 doctype,documentElement,defaultView,body,head,activeElement 2. ...
- 史上最全JavaScript数组对象详解(二)
JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用.说到数组的方法,主要分为两 ...
- html内置时间对象,JavaScript中的常用事件,以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解 今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
- JavaScript Date对象详解 以及 时间戳和时间的相互转换
目录 一.Date对象详解 1.Date对象 2.创建Date对象 3.Date对象属性 4.Date对象方法 5.Date对象的应用(节流函数时间戳写法) 二.时间戳和时间的相互转换 1.时间转换为 ...
最新文章
- 科研|Science回应中国燃料电池研究“造假”:发函重点关注,之前撤稿率100%
- linux chroot 命令 设置根目录路径
- MATLAB之相关函数
- c语言 字符相加_C语言中自加自减的编译原理
- mysql_group by与聚合函数、order by联合使用
- zigbee传输速率_wifi智能开关和zigbee智能开关有哪些区别
- python爬取京东手机数据_实例解析Python如何实现爬取京东手机图片
- Chainlink预言机正式集成至币安智能链
- +号的用法(3+5+“8”与“3”+5+8相同吗)
- 微信农场,第二个QQ秀?
- IP属地信息哪里来的?手把手教你实现通过IP查询属地信息
- PCL_点云数据处理方法概述
- Go语言 常用日志记录方法
- 【c语言】产生一个1到1000的随机整数,用户进行猜测
- HTML实现文件上传和HTML实现打开文件目录
- [WDS]Disconnected!
- Java程序员常用的各种快捷键和命令
- 源代码来了 | 英伟达开源行人生成/重识别代码
- 二手车价格预测task03:特征工程
- 正在保存“index.vue”: 从 “‘Vetur‘, ‘ESLint‘“ (configure)中获取代码操作。
热门文章
- 微信小程序返回上一页 没有上一页的情况下返回首页
- 架构探险-轻量级微服务架构_第3部分-单活动架构+一些时髦的Dagger
- python、pandas、Excel、Powerbi中对日期的处理方法
- 不推荐理财保险(分红险、投资连结险等)的几点理由---实际案例分析计算说明
- pytorch学习之如何画损失函数曲线图
- JVM参数-XX:+HeapDumpOnOutOfMemoryError使用方法
- 亚马逊SP-API申请,亚马逊SP-API注册,亚马逊开发者申请,PII申请怎么做?SP-API是什么?
- uni-app运行在手机或模拟器上(使用雷电模拟器)
- Dockerfile文件解释
- 小白MacBook超级实战教程——装双系统WIN10