JavaScript之BOM五大对象(window;location;navigator;screen;history)

464 阅读2分钟

JavaScript语言由三部分组成

  • ECMAJavaScript:定义了js的语法规范

  • Dom:document object model文档对象模型:一个HTML文档中所有的一切都是dom对象

  • Dom定义了一套操作HTML文档的API(节点的增删改查)

Bom:Brower object model浏览器对象模型

例如:一个浏览器的窗口就是一个window对象

Bom定义了一套操作浏览器窗口的API

Bom主要由五大对象组成:

  • window:浏览器核心对象

  • location:包含当前页面的URL信息

  • history:history对象主要用于记录你当前窗口的历史记录

  • navigator:包含当前浏览器的信息例如用的什么浏览器,操作系统版本等

  • screen:获取用户电脑的屏幕分辨率,一般不用,因为对开发者没啥作用

1.window对象:指的是当前浏览器窗口,它是JS中的顶级对象

(1).所有的全局变量都是window对象的属性:最顶级的对象

document对象

bom对象

全局的方法:alert(),setInterval()...........

(2).只要是window的属性和方法,在使用的时候都可以省略window

例如:window.alert() 可以省略window写成alert()

例如:window.document 可以省略window写成document

(3).window对象有一个特殊属性叫做name

  • 它永远都是一个字符串,无论给他赋什么值

(4).window对象有两个常用的方法:open()与close()

open():打开一个窗口

close():关闭一个窗口

(5).window对象有三个事件,记录了浏览器窗口从打开到关闭的三个过程

  • window.onload:界面上所有的内容加载完毕之后才触发这个事件

  • window.onbeforeunload:界面在关闭之前会触发这个事件

  • window.onunload:界面在关闭的那一瞬间会触发这个事件

2.location对象:包含当前页面的URL信息

  • location.href:全球统一资源定位符

  • location.href = 协议名(http) + ip地址(域名) + 端口号 + 资源路径

暂时只需要知道location对象包含一个网页的网络url信息即可,具体的含义将在后面阶段学习网络的时候详细讲解

location对象有三个常用的方法

(1)打开新网页:location.assign('你要打开的新网页的url')

(2)替换当前网页:location.replace('要替换的网页url')

(3) 刷新当前网页: location.reload()

3. history对象主要用于记录你当前窗口的历史记录

主要作用就是前进和后退网页(相当于浏览器的左上角前进后退按钮功能)

history.forward():前进

history.back():后退

跳转指定页数: history.go( 数字 ) :

  • 正数:前进几页

  • 1:前进下一页

  • 负数:回退几页

  • -1:返回上一页

4.navigator对象包含当前浏览器的信息

  • 工作中应用场景:用户信息统计(统计我这个网站平台的用户群体分布,什么浏览器,windows什么版本等)