BOM总结
BOM总结
BOM概述
BOM(Browser Object Model)即浏览器对象模型,它提供了==独立于内容==而与==浏览器窗口==进行交互的对象,其核心对象是 window
BOM 由一系列相关的==对象==构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分
1. DOM与BOM的区别
DOM
- 文档对象模型
- DOM是把文档当做一个对象来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准
BOM
- 浏览器对象模型
- 把浏览器当做一个对象来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
2. BOM构成
BOM比DOM更大,包含了DOM
window对象是浏览器的顶级对象,具有双重角色
是JS访问浏览器窗口的一个接口
是一个全局对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用时可以省略window,对话框都属于window的对象和方法,如alert()、prompt()等
window对象的常见事件
1. 窗口加载事件
window.onload = function(){}或
window.addEventListener(‘load’, function() {});
window.onload是窗口(页面)加载事件,当文档内容完全加载完成才会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数
注意:
- 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容完全加载完毕,再去执行处理函数
- window.onload传统注册事件只能写一次,如果有一个,会以最后一个window.onload为准
- 如果使用addEventListener则没有限制
document.addEventListener(‘DOMContentLoaded’, function() {})
DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表、图片、flash等
如果页面的图片很多的话, 从用户访问到onload
触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适
1 | window.addEventListener('load', function() { |
2. 调整窗口大小事件
window.onresize = function() {}
window.addEventListener(‘resize’, function() {});
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数
注意:
- 只有窗口大小反生==像素变化==。才会触发这个事件
- 经常利用这个事件完成响应式布局。
- 用window.innerWidth来表示当前屏幕的宽度
1 | window.addEventListener('load', function() { |
定时器
1. setTimeout()定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数,只执行一次
注意:
- window可以省略
- 这个调用函数可以直接写函数,或者函数名或者采取字符串’函数名()’三种形式,不推荐第三种
- 延迟的毫秒数省略默认是0,如果写,必须是毫秒
- 因为定时器可能有很多。所以经常需要给定时器赋值一个标识符
1 | setTimeout(function() { |
setTimeout()这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用,而回调函数需要等待时间,事件道路才会调用这个函数,因此称为回调函数
之前的element.onclick = function(){}或者element.addEventListener(‘click’, fn);里面的函数也是回调函数
2.clearTimeout()停止定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器
注意:
- window可以省略
- 括号里面的参数就是定时器的==标识符==
1 | <body> |
3. setInterval()定时器
window.setInterval(回调函数, [间隔的毫秒数])
setInterval()方法重复调用一个函数。每隔这个时间,就调用一次回调函数
注意:
第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次,会执行很多次
其余同setTimeout注意事项
1 | setInterval(function() { |
4. 停止setInterval()定时器
window.clearInterval(intervalID)
1 | var begin = document.querySelestor('.begin'); |
this指向
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
1 | console.log(this); //输出window |
JS执行机制
1.JS是单线程
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉
2. 同步和异步
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步
- 同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的
同步任务都在主线程上执行,形成一个**==执行栈==**
- 异步
在做这件事的同时,你还可以去处理其他事情
异步任务是通过==回调函数==实现的,一般而言,异步任务有以下三种类型:
普通事件,如 click、resize 等
资源加载,如 load、error 等
定时器,包括 setInterval、setTimeout 等
异步任务相关回调函数添加到==任务队列==中(任务队列也称为消息队列)
==他们的本质区别: 这条流水线上各个流程的执行顺序不同==
3. 执行机制
- 先执行执行栈中的同步任务。
- 异步任务(回调函数)放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环
location对象
1. 定义
window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。
2. URL
URL,统一资源定位符,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
1 | //http://www.incast.cn/index.html?name=andy&age=18#link |
组成 | 说明 |
---|---|
protocol | 通信协议 常用的http,ftp,maito等 |
host | 主机(域名)www.xxx.com |
port | 端口号 可选,省略时使用方案的默认端口 如http的默认端口为80 |
path | 路径 由零或多个’/‘符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
query | 参数 以键值对的形式,通过&符号分隔开 |
fragment | 片段 #后面内容常见于链接 锚点 |
3. location对象的属性
location对象属性 | 返回值 |
---|---|
location.href | 获得或者设置整个URL |
location.host | 返回主机(域名) |
location.port | 返回端口号 如果未写返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容常见于链接 锚点 |
==重点:href和search==
1 | var btn = document.querySelector('button'); |
1 | console.log(location.serch); //?uname=andy |
4. location对象的方法
location对象方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以转跳页面(也称为重定向页面) |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5 |
navigator对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值
history对象
window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL
history对象方法 | 作用 |
---|---|
back() | 后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能(参数如果是1前进一个页面如果是-1后退一个页面) |
1 | <a href ="index.html">点击我去往首页</a> |