【学习笔记】:JavaScript中的BOM对象

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


[toc] 一、jQuery概述 write less , do more . jQuery是轻量级的JavaScript函数库,在使用时需要引入jQuery库文件。引用方式如下,两种都可。 二、jQ
[toc] 一、获取节点 1、获取节点文本内容 2、获取节点属性 二、创建节点 创建节点不等同于添加节点,创建的节点还不在文档节点树中。 1、创建元素 2、创建文本节点 3、创建属性节点 三、添加节点
[toc] 一、内容操作 1、html() 与JS中的interHTML属性类似,用以读取或者设置某个元素的HTML内容。 2、text() 与JS中innerText属性类似,用以读取或设置某个元素
[toc] 一、DOM的概念 DOM的英文全称是 Document Object Model ,即文档对象模型,是用以操作 HTML文档和XML文档 的API。 W3C将DOM分为三个不同的部分,分别
PS:许多控制样式的标签在HTML5中都不推荐使用,建议使用CSS,如align,border等。 一、概念 的英文全称: 超文本标记语言。 超文本 超文本 是一种组织信息的方式,它通过 超链接 的方
[toc] 层叠样式表 是一种用于表现HTML或XML等文件样式的计算机语言。 可以静态修饰网页,也可以配合各种脚本语言动态地对网页元素进行格式化。 一、CSS与HTML结合方式 以下三种方式,css
jQuery实现轮播图无缝连接 参考链接地址: &quot;https://blog.csdn.net/qq_36996271/article/details/82015950&quot; 自我总结:
jQuery实现简易版列表联动 本文为学习过程中的总结,也许许多地方可能过于片面,考虑不周全,还望前辈们评论区批评指正呐! 简易版三级联动效果如下: 代码如下: 总结一下注意的点: jQuery的引入
JavaScript中的BOM对象 BOM(Browser Object Model): 浏览器对象模型 。 BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的
[toc] 一、JavaScript的实现 ECMAScript:ECMA(欧洲计算机制造协会)指定的全新脚本语言,用于规定当时三足鼎立的三家Script语言(网景的JavaScript、Nombas