JavaScript之BOM
JavaScript
BOM概述
BOM(Browser Object Model ): 浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
DOM 就是把 文档 当作一个对象来看待 | 把 浏览器当作一个对象来看待 |
DOM 的顶级对象是 document |
BOM 的顶级对象是 window |
DOM 主要学习的是操作页面元素 | BOM 学习的是浏览器窗口交互的一些对象 |
DOM 是 W3C 标准规范 | BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差 |
BOM的构成
- BOM 比 DOM 更大。它包含 DOM。
- window 对象是浏览器的顶级对象,它具有双重角色
- 它是 JS 访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
alert()、prompt()等都是window的方法
window 对象的常见事件
窗口加载事件
window.onload
是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数。
两种写法:
1 | window.onload = function(){}; |
使用了window.onload
可以把JS代码写到页面元素的上方,因为load是等页面内容全部加载完毕,再去执行处理函数
window.onload
传统注册事件方式,只能写一次,如果有多个,会以最后一个window.onload
为准
如果使用addEventListener
则没有限制
load()和DOMContentLoaded()的区别:
load
等页面内容全部加载完毕,包括页面dom元素,图片,flash,css等
DOMContentLoaded
是DOM加载完毕,不包含图片 flash css 等就可以执行,加载速度比load更快一些
调整窗口大小事件
window.onresize
是调整窗口大小加载事件,当触发时就调用的处理函数
1 | window.onresize = function() {} |
定时器
window 对象给我们提供了两个定时器
setTimeout()
setInterval()
setTimeout()定时器
setTimeout()
方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
1 | window.setTimeout(调用函数,[延迟的毫秒数]); |
clearTimeout()停止定时器
clearTimeout()
方法取消了先前通过调用 setTimeout()
建立的定时器
1 | window.clearTimeout(timeoutID) |
setInterval()定时器
setInterval()
方法重复调用一个函数,每隔这个时间,就去调用一次回调函数
1 | window.setInterval(回调函数,[间隔的毫秒数]); |
clearInterval()停止定时器
clearInterval ( )
方法取消了先前通过调用 setInterval()
建立的定时器
1 | window.clearInterval(timeoutID) |
this指向
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁
全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
方法调用中谁调用this指向谁
构造函数中this指向构造函数实例
location对象
window 对象给我们提供了一个 location
属性用于获取或者设置窗体的url,并且可以解析url。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。
url
统一资源定位符(uniform resouce locator)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
url 的一般语法格式为:
1 | protocol://host[:port]/path/[?query]#fragment |
组成 | 说明 |
---|---|
protocol |
通信协议 常用的http,ftp,maito等 |
host |
主机(域名) |
port |
端口号 |
path |
路径 由零或多个'/'符号隔开的字符串 |
query |
参数 以键值对的形式,通过&符号分隔开来 |
fragment |
片段 #后面内容 常见于链接 锚点 |
location对象属性
location对象属性 | 返回值 |
---|---|
location.href |
获取或者设置整个URL |
location.host |
返回主机(域名) |
location.port |
返回端口号,如果未写返回空字符串 |
location.pathname |
返回路径 |
location.search |
返回参数 |
location.hash |
返回片段 #后面内容常见于链接 锚点 |
location对象方法
location对象方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相当于刷新按钮或者 f5 ,如果参数为true 强制刷新 ctrl+f5 |
navigator对象
navigator 对象包含有关浏览器的信息,它有很多属性
我们常用的是userAgent
,该属性可以返回由客户机发送服务器的user-agent
头部的值
下面前端代码可以判断用户是用哪个终端打开页面的,如果是用 PC 打开的,我们就跳转到 PC 端的页面,如果是用手机打开的,就跳转到手机端页面:
1 | if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { |
history对象
window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互
该对象包含用户(在浏览器窗口中)访问过的 URL。
history对象方法 | 作用 |
---|---|
back() |
可以后退功能 |
forward() |
前进功能 |
go(参数) |
前进后退功能,参数如果是 1 前进1个页面 如果是 -1 后退1个页面 |