目录
一、BOM概述
浏览器对象模型(Browser Object Model):它提供了独立于内容而与浏览器窗口进行交互的对象
,其核心为window
BOM是由一系列相关对象构成,每个对象提供了很多属性和方法
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
1、DOM和BOM区别
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
把文档 当做一个对象 来看待 | 把浏览器 当做一个对象 来看待 |
顶级对象为document | 顶级对象为window |
主要学习操作元素 | 主要浏览器窗口交互的一些对象 |
W3C标准规范 | 浏览器厂商在各自浏览器上定义,兼容性较差 |
2、BOM构成
BOM比DOM更大,它包含DOM
window 对象是浏览器的顶级对象,它具有双重角色。
① 它是JS访问浏览器窗口的一个接口
② 它是一个全局对象,定义在全局作用于中的变量、函数都会变成window对象的 属性和方法
③ 在调用的时候可以省略window,alert()、prompt()等都属于window对象方法
注意:window下的一个特殊属性 window.name
二、window 对象的常见事件
1、窗口加载事件
《1》window.onload()方法
window.onload()
是窗口(页面)加载事件,当文档内容完全加载完毕会触发调用该处理函数
window.onload = function() {};
// 或者
window.addEventListener("load",function(){ });
① 有了window.onload就可以把JS代码写在页面元素的上方,因为 onload 是等页面内容全部加载完毕(包括图像、css、脚本文件等),再去执行处理函数
② window.onload传统注册方法只能写一次,多写以最后一个为准,用addEventListener无限制
《2》DOMContentLoaded事件
DOMCotentLoaded事件
触发时,仅当DOM加载完毕,不包括样式表、图片、flash等
// Ie9以上才支持
document.addEventListener('DOMContentLoaded',function(){ })
当页面图片比较多,从用户访问到onload触发需要等待较长事件,交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适
2、调整窗口大小事件(window.onresize())
window.onresize()
是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.onresize = function() {};
// 或者
window.addEventListener("resize",function(){ })
① 只要窗口大小发生像素变化,就会触发onresize事件
② 通常用这个方法实现响应式布局,window.innerWidth当前屏幕的宽度
三、定时器
window对象提供了两种定时器方法:① setTimeout()
② setInterval()
1、setTimeout() 定时器到期后执行
window.setTimeout(调用函数,[延迟毫秒数]);
注意:
① window可以省略
② 延迟的毫秒数,默认为0,必须写成毫秒
③ 因为定时器可以有很多,因此可以给定时器赋值一个标识符
《1》停止定时器
window.clearTimeout(定时器ID)
2、setInterval() 每隔一段时间执行
window.setInterval(回调函数,[间隔的毫秒数])
第一次执行也是间隔毫秒数,因此刷新页面会有空白
《1》停止定时器
window.clearInterval(定时器ID)
3、回调函数
定时器中的函数被称为回调函数callback
回调函数原理
:函数作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完毕之后,再执行传进去的这个函数,这个过程叫做回调
回调函数写的位置:定时器结束的位置。
4、this指向
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this的指向,一般情况下this的最终指向都是那个调用它的对象
this的指向
① 全局作用域和普通函数中this指向全局对象window(定时器里的this也是指向window)
② 方法调用中谁调用this指向谁
③ 构造函数中this指向构造函数的实例
四、 JS执行机制
JS语言的一大特点就是单线程
,也就是说同一个时间只能做一件事
。
单线程意味着,所有任务需要排队,前一个任务结束之后,才会执行后一个任务。这样的结果:如果JS执行的时间过长,这样会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉
1、同步和异步
为了解决渲染阻塞的问题,利用多核CPU的计算能力,HTML5提出Web Worder标准,允许JS脚本创建多线程,于是JS出现了同步和异步
《1》同步任务
前一个任务执行完再执行后一个任务,程序的执行顺序与任务的排列迅速是一致的、同步的。
《2》异步任务
在做这个任务的同时,还可以去做其他任务。
JS中异步任务是通过回调函数实现的,一般来说,异步任务有以下三种类型:① 普通事件:click、resize等 ② 资源加载:load、error等 ③ 定时器:setTimeout、setInterval等
《3》区别
本质区别:这条流水线上各个流程的执行顺序不同
同步任务都在主线程上执行,形成一个执行栈
;异步任务相关回调函数
添加到任务队列
中(也叫消息队列)
2、执行机制
① 先执行栈中的同步任务
② 异步任务放到任务队列中
③ 一旦执行栈中的所有同步任务执行完毕,系统会按次序读取任务队列中的异步任务,被读取到的异步任务结束等到状态,进入执行栈开始执行
由于主线程上不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event lop)
五、location对象
Window对象提供了一个location属性
,用于获取或设置窗体URL
,并且用于解析URL
,该属性返回值是一个对象。
1、location对象的属性
location对象的属性 | 返回值 |
---|---|
location.href | 获取或设置 整个URL |
location.host | 返回主机(域名) |
location.hash | 返回片段(#后面的内容)常见于链接、锚点 |
location.port | 返回端口号 如果未写,返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
2、location对象的方法
location对象的方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(也可以重定向页面) |
location.replace() | 替换当前的页面,因为不记录历史,所以不能后退页面 |
location.reload | 重新加载页面,相当于刷新按钮,如果参数为true,强制刷新 |
3、URL
统一资源定位符
(Uniform Resource Locator)是互联网标准资源的地址
URL的语法格式:
protocol://host[:port]/path/[?query]#fragment
http://www.baidu.com/index.html?name=zs&age=18
组成 | 说明 |
---|---|
protocol | 通信协议,常用的http、https、maito等 |
host | 主机(域名) www.baidu.com |
port | 端口号,http默认的为80 |
path | 路径:由零或多个’/'符号隔开的字符串 |
query | 参数:以键值对的形式,通过&符分割 |
fragment | 片段:#后面内容 常见于链接,锚点 |
六、navigator对象
navigator对象包含有关浏览器的信息,有很多属性,常用的是userAgent,该属性用于返回由客户机发送服务器的 user-agent 头部的值
判断用户哪个终端打开页面,实现跳转
if(navigator.userAgent.match(/phone|pad|pod|iPhone|iPod|ios|iPad|Anroid|Mobile|BlachBerry|IEMobile|MQQBrower|JUC|Fennec|WOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i){
window.location.href=""; // 手机
}else {
window.location.href="" // 电脑
}
七、history对象
window提供的history对象,可以与浏览器历史记录进行交互。该对象包含用户在浏览器窗口中访问过的URL
history对象方法 | 作用 |
---|---|
history.back() | 可以后退功能 |
history.forward() | 可以前进功能 |
history.go(参数) | 前进或者后退功能 |