JavaScript中的BOM对象

BOM(Browser Object Model):浏览器对象模型

BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象属性和方法可能会有所不同。

BOM对象也就是我们所说的宿主对象,总共分为五类:Window、Navigator、Screen、History、Location。

一、Window对象

Window 对象表示浏览器中打开的窗口

1、特点

Window对象是全局对象,所有的表达式都可以再当前的环境中计算。因此,Window对象的属性和方法都可以直接使用,下面两种方式效果是一样的:

window.alert(123);	//1
alert(123); //2

2、方法

弹出框相关

  1. alert():显示带有一段消息和一个确认按钮的警告框
  2. confirm():显示带有一段消息以及确认按钮和取消按钮的消息框(方法返回值:确定为true,取消为false)。
  3. prompt():显示可提示用户输入的对话框(返回值:用户输入的值)

打开关闭相关

  1. close():调用者是谁,就close谁的窗口。
  2. open():打开一个新的浏览器窗口,将会返回新的Window对象。

定时器相关

  1. setTimeout(code,millisec):在(millisec) 毫秒数后执行(code),只执行一次!

    • 参数

      • code:js代码或方法对象
      • millisec:毫秒值。
    • 返回值:返回唯一标识ID,用于clearTimeout()方法取消指定的定时器。
  2. clearTimeout(id_of_settimeout):取消由 setTimeout() 方法设置的定时器。
    • 参数

      • id_of_settimeout :传入setTimeout方法的返回值id,取消该定时器。
  3. setInterval(code,millisec):每隔(millisec)毫秒就执行(code),除非被clearInterval()取消,否则不会停。
  4. clearInterval(id_of_setinterval):取消由 setInterval() 设置的定时器。

下面两个参数、返回值和上面相同,区别在于:前者是一次性的计时,后者是循环的计时

以下代码源自W3School:

<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>

3、属性

  1. 其他BOM对象:history、location、Screen、Navigator
  2. DOM对象:document

意思是:通过window对象可以方便的操纵其他BOM对象和DOM对象,我们之前见过的document.write(123);其中的DOM对象document就是通过Window全局对象来调用的。

二、Location对象

Location 对象包含有关当前 URL 的信息。

方法

reload():重新加载当前文档,即刷新界面。

属性

href:可读可写,意味着既可以设置新的URL,也可以返回当前完整的URL。

三、History对象

History对象包含用户在浏览器窗口中访问过的URL。

方法

  1. back():加载 history 列表中的前一个 URL。
  2. forward():加载 history 列表中的下一个 URL。
  3. go():加载 history 列表中的某个具体页面。

属性

length:返回当前窗口历史列表中的URL数量

四、Screen对象

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

五、Navigator

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


参考链接:W3School--BOM

【学习笔记】:JavaScript中的BOM对象的更多相关文章

  1. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  2. JS 学习笔记--JS中的事件对象基础

    事件:JavaScript中的事件是由访问web页面用户的一系列操作引起的,比如点击鼠标,键盘按键等.当用户执行某些操作的时候再去执行一些代码. 事件模型:内联模型.脚本模型.DOM2模型 内联模型: ...

  3. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  4. 读书笔记-JavaScript中的全局对象

    对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性 ...

  5. HTML 学习笔记 JavaScript (Math和Number对象)

    标签: Math对象:数学对象,提供对数据的数学计算.如:获取绝对值,向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. Number对象:Js中提供的数字的对象.包含整数,浮点数等等.并提 ...

  6. javascript中的BOM对象

    1.window对象 所有的浏览器都支持window对象 概念上讲,一个html文档对应一个window对象 功能上讲,控制浏览器窗口 使用上讲,window对象不需要创建对象,直接使用 2.wind ...

  7. Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象

    screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...

  8. JavaScript学习笔记(十五)——对象之Date,RegExp

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  9. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

随机推荐

  1. SycSec成都信息工程大学2019CTF-前五道WEB题writeup

    一.WEB (1)一起来撸猫 flag藏在标签的注释内  <!--这是注释--> (2)你看见过我的菜刀么 eval漏洞 利用蚁剑连接 连接密码就是要post传的参数 连接成功后在网站根目 ...

  2. 「 从0到1学习微服务SpringCloud 」05服务消费者Fegin

    系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」01 一起来学呀! 「 从0到1学习微服务SpringCloud 」02 Eureka服务注册与发现 「 从0到1学习微服务S ...

  3. 聊一聊 MySQL 中的数据编辑过程中涉及的两阶段提交

    MySQL 数据库中的两阶段提交,不知道您知道不?这篇文章就简单的聊一聊 MySQL 数据库中的两阶段提交,两阶段提交发生在数据变更期间(更新.删除.新增等),两阶段提交过程中涉及到了 MySQL 数 ...

  4. abp vnext2.0之核心组件模块加载系统源码解析与简单应用

    abp vnext是abp官方在abp的基础之上构建的微服务架构,说实话,看完核心组件源码的时候,很兴奋,整个框架将组件化的细想运用的很好,真的超级解耦.老版整个框架依赖Castle的问题,vnext ...

  5. MVC ajaxfileupload 实现无刷新导入或上传功能

    直接上代码吧 前台 先引用 ajaxfileupload.js <script src="~/Scripts/ajaxfileupload.js"></scrip ...

  6. OpenDJ入门 | 5分钟快速入门Forgerock DS

    本教程为了让大家快速体验,故不做深入讲解,详细内容请留意后续进阶教程 介绍 OpenDJ是一个目录服务器,它实现了各种轻量级目录访问协议和相关标准,包括完全符合LDAPv3,但也支持目录服务标记语言( ...

  7. tmobst5

    (单选题)SQL语言又称为() A)结构化定义语言 B)结构化控制语言 C)结构化查询语言 D)结构化操纵语言 2.(单选题)只有满足联接条件的记录才包含在查询结果中,这种联接为( ) A)左联接 B ...

  8. Spanner的TrueTime与事务

    Spanner的TrueTime与事务 Spanner是谷歌的分布式数据库,发表于著名论文Spanner: Google's Globally-Distributed Database,它创造性的采用 ...

  9. 如何为wordpress 的文章添加分页

    原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上&l ...

  10. JavaScript 与 Java 有什么不同?

    JavaScript 编程语言是由 Netscape,Inc. 开发的,它并不是 Java 平台的一部分. JavaScript 不会创建小应用程序或独立应用程序.在最常见的形式中,JavaScrip ...