目录
BOM概述
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性；但是它缺乏标准，BOM最初是Netscape浏览器标准的一部分；
| 中文名 | 操作对象 | 顶级对象 | |
| DOM | 文档对象模型 | 文档 | document |
| BOM | 浏览器对象模型 | 浏览器 | window |
BOM比DOM范围更大，它包含DOM;
window对象是浏览器的顶级对象，它具有双重角色；
- 它是JS访问浏览器窗口的一个接口；
- 它是一个全局变量。定义在全局作用域中的变量、函数都会变成window对象的属性和方法；
一般在调用window的属性和方法时要省略window，如alert()方法；
Window对象的常见事件
窗口加载事件
window.onload是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，然后调用其处理函数；
window.onload = function() {
}
或
window.addEventListener('load', function() {
});注意：
- 有了window.onload就可以把JS代码写到页面元素的任意位置，因为onload是等页面内容全部加载完毕，再去执行处理函数；
- window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准；
- 使用addEventListener则没有此限制；
- DOMContentLoaded是DOM加载完毕，不包含图片、flash、css等就可以执行，因此加载速度要更快一些；
调整窗口大小事件
window.onresize是调整窗口大小加载事件，当窗口大小改变时就会触发其中的处理函数；
window.onresize = function() {
}
或
window.addEventListener("resize", function(){
});该事件经常被用来做响应式布局，会用到当前屏幕宽度window.innerWidth;
定时器
- 设置setTimeout()定时器
该方法用于设置一个定时器，在时间到期时执行调用函数；
window.setTimeout(调用函数，[延迟的毫秒数]);<script>
setTimeout(function() {
alert('这是一个定时器~')
}, 3000);
</script>
或
<script>
function callback() {
alert('这是一个定时器~')
}
setTimeout(callback, 3000);
</script>注意：
该定时器在调用的时候可以忽略window；
延时时间单位是毫秒，若省略则默认是0（立即执行），时间不用加单位；
调用函数（回调函数）可以直接写函数，也可以写函数名；方便起见，可以先声明函数，再在回调函数中调用，方便后面关闭定时器；
由于定时器可能一个页面有很多，所以经常给定时器赋值一个标识符；
- 停止setTimeout（）定时器
window.clearTimeout(timeoutID); // timeoutID即定时器的标识符(名称)<script>
var timer1 = setTimeout(function() {
alert('这是一个定时器~')
}, 3000);
clearTimeout(timer1); // 则不会再弹出alert框
</script>- 设置setInterval()定时器
setInterval()方法每隔设置的时间，就会重复调用回调函数；
window.setInterval(回调函数, [间隔的毫秒数]);注意事项有setTimeout()定时器一样；
- 停止setInterval()定时器
clearInterval()方法取消了先前通过调用setInterval()建立的定时器；
window.clearInterval(intervalID);同步与异步
由于JS是单线程语言，即同一时间只能做一件事情，这样导致的问题是：若JS执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞；
为解决这问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是就有了同步和异步；
同步任务：都在主线程上执行，形成一个执行栈；
异步任务：通过回调函数实现，异步任务相关的回调函数会被添加到任务队列中（又称消息队列）；
一般而言，异步任务有以下三种类型：
1、普通事件，如click、resize等；
2、资源加载，如load、error等
3、定时器，包括setInterval、setTimeout等
JS执行机制：
1、先执行执行栈中的同步任务；
2、异步任务（回调函数）放入任务队列中；
3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行；
由于主线程不断的重复获得任务，执行任务、再获取任务、再执行，所以该种机制被称为事件循环(event loop)
location对象
定义
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以将这个属性称为location对象;
URL
统一资源定位符（Uniform Resource Loaction,URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为： protocol://host:[:port]/path/[?query]#fragment
如：
http://108.108.104.109: 208/test/test_vue/commits/
http://108.108.104.109: 208/#/test_vue/test?seqno=0001&type=1
| 组成 | 说明 |
| protocol | 通信协议，常用的http,ftp等 |
| host | 主机（域名） |
| port | 端口号 可选 省略时使用方案的默认端口 |
| path | 路径由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数，以键值对的形式通过&符号分隔开来 |
| fragment | 片段 #后面内容 常见于链接或锚点 |
- location对象的属性
| location对象 | 返回值 |
| location.href | 获取或者设置整个url |
| location.host | 返回主机（域名） |
| location.origin | 返回当前页面来源的域名的标准形式（当前协议 + 域名） |
| 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头部的值;
history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
| history对象方法 | 作用 |
| back() | 可后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能 若是正数，则前进；若是负数，则后退 |
history对象一般在实际开发钟比较少用，但是会在一些OA办公系统中见到 ；
元素偏移量offset系列
offset概述
offset翻译过来就是偏移量，使用offset系列相关属性可动态得到该元素的位置(偏移)/大小等，如获得元素距离带有定位父元素的位置；获得元素自身的大小(宽度高度)等；注意offset系列返回的结果不带单位；
| offset系列属性 | 作用 |
| element.offsetParent | 返回作为该元素带有定位的父级元素，若父级没有都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding/边框/内容区的宽度 |
| element.offsetHeight | 返回自身包括padding/边框/内容区的高度 |
offset与style区别
| offset | style |
| offset可得到任意样式表中的样式值 | style只能得到行内样式表中的样式值 |
| offset系列获得的数值是没有单位的 | style.width获得的是带有单位的字符串 |
| offsetWidth包含padding+border+width | style.width获得不包含padding和border的值 |
| offsetWidth等属性是只读属性，只能获取不能赋值 | style.width是可读写属性，可获取也可赋值 |
所以，要获取元素大小位置，用offset更合适；想要给元素更改值，则需要用style改变
元素可视区 client系列
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可动态的得到该元素的边框大小、元素大小等；
| client系列属性 | 作用 |
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位 |
元素滚动scroll系列
scroll即滚动的，使用scroll系列的相关属性可动态的得到该元素的大小、滚动距离等
| scroll系列属性 | 作用 |
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |
若浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部，滚动条在滚动时会触发onscroll事件；
三大系列总结
offset系列，经常用于获取元素位置 offsetLeft offsetTop
client系列经常用于获取元素大小 clientWidth clientHight
scroll系列经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过window.pageXoffset获得
扫一扫
