BOM模型

Posted by MJ on April 18, 2019

BOM模型

ECMAScript无疑是JavaScript的核心,但是要想在浏览器中使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。 BOM将浏览器中的各个部分转换成了一个一个的对象,我们通过修改这些对象的属性,调用他们的方法,从而控制浏览器的各种行为。

#window对象 window对象是BOM的核心,它表示一个浏览器的实例。在浏览器中我们可以通过window对象来访问操作浏览器,同时window也是作为全局对象存在的。

全局作用域:window对象是浏览器中的全局对象,因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。

#窗口大小 浏览器中提供了四个属性用来确定窗口的大小:

  • 网页窗口的大小
    • innerWidth
    • innerHeight
  • 浏览器本身的尺寸
    • outerWidth
    • outerHeight

#打开窗口 使用 window.open() 方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。

这个方法需要四个参数:

  • 需要加载的url地址
  • 窗口的目标
  • 一个特性的字符串
  • 是否创建新的历史记录

#调用方式 ##超时调用

超时调用:

  • setTimeout()
  • 超过一定时间以后执行指定函数
  • 需要连个参数:
    • 要执行的内容
    • 超过的时间

取消超时调用

  • clearTimeout()

超时调用都是在全局作用域中执行的。

##间歇调用 间歇调用:

  • setInterval()
  • 每隔一段时间执行指定代码
  • 需要两个参数:
  • 要执行的代码
  • 间隔的时间

取消间隔调用:

  • clearInterval()

#系统对话框 浏览器通过 alert() 、 confirm() 和 prompt()方法可以调用系统对话框向用户显示消息。它们的外观由操作系统及(或)浏览器设置决定,而不是由 CSS 决定。显示系统对话框时会导致程序终止,当关闭对话框程序会恢复执行。

##alert

  • alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。
  • 例如: alert(“Hello World”);

##confirm

  • confirm和alert类似,只不过confirm弹出的对话 框有一个确认和取消按钮。用户可以通过按钮来 确认是否执行操作。
  • 例如: confirm(‘你确定吗?’);
  • 这个函数的执行会返回一个布尔值,如果选择确 定则返回true,如果点击取消则返回false。

##prompt

  • prompt会弹出一个带输入框的提示框,并 可以将用户输入的内容返回。
  • 它需要两个值作为参数:显示的提示文字,文本框中的默认值
  • 例子: prompt(‘你的年龄是?’,’18’);

#location对象

  • location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导 航功能。
  • href属性: href属性可以获取或修改当前页面的完整的URL地址,使浏览器跳转到指定页面。
  • assign() 方法:所用和href一样,使浏览器跳转页面,新地址错误参数传递到assign ()方法中
  • replace()方法:功能一样,只不过使用replace方法跳转地址不会体现到历史记录中。
  • reload() 方法:用于强制刷新当前页面

#navigator对象

  • navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。
  • 我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。

#screen对象

  • screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的 信息,如像素宽度和高度等。
  • 该对象作用不大,我们一般不太使用。

#history对象

  • history 对象保存着用户上网的历史记录, 从窗口被打开的那一刻算起。
  • go()
  • 使用 go() 方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
  • back()
  • 向后跳转
  • forward()
  • 向前跳转

#document

  • document对象也是window的一个属性,这个对象代表的是整个网页的文档对象。

  • 我们对网页的大部分操作都需要以document对象作为起点。

  • 关于document对象的内容,我们后边还要具体讲解。

END