那年杏花微雨，你说你是BOM
皇上，敬事房的人来了，该翻牌子了
一、什么是BOM
1.1 BOM概述
BOM browser object model
即浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了许多方法和属性。但其缺乏标准，Javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。（就比如说你用不同的浏览器显示alert弹窗，显示效果不完全相同，这就是因为每个浏览器有他自己的BOM标准）
BOM比DOM更大，它包含DOM
1.2 DOM与BOM的区别
DOM
- 文档对象模型
- DOM就是把文档当作一个对象来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准规范
BOM
- 浏览器对象模型
- 把浏览器当作是一个对象来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。
二、window对象的常用事件
window对象是浏览器的顶级对象，它具有双重角色
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。
2.1 窗口加载事件
window.onload = function() {}
window.addEventListener("load",function() {})
document.addEventListener('DOMContentLoaded',function() {})
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等等。如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
注意
- 有了
window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数 window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准- 如果使用
addEventListener则没有限制，可以叠加很多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('hh');
})
alert('11');
})
window.addEventListener('load',function(){
alert('22');
})
document.addEventListener('DOMContentLoaded',function(){
alert('33');
})
</script>
</head>
<body>
<button>hhh</button>
</body>
</html>
最先显示33，而后是11，然后是22，之后才显示按钮以触发点击事件。
2.2 调整窗口大小事件
window.onresize = function() {}
window.addEventListener("resize",function() {})
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
注意
- 只要窗口大小发生像素变化，就会触发这个事件
- 我们经常利用这个事件完成响应式布局，
window.innerWidth为当前屏幕的宽度
2.3 定时器
2.3.1 设置定时器
方法一setTimeout()
window.setTimeout(调用函数，[延迟的毫秒数])（这个window可以省略，延迟时间可以省略，省略后默认是0）
setTimeout()方法用于设置一个定时器，该定时器在定时到期后执行调用函数
<script>
//第一种写法
setTimeout(function(){
console.log('时间到了');
},2000);
//第二种写法
function callback(){
console.log('时间到了');
}
setTimeout(callback,2000);
</script>
方法二setInterval()
window.setInterval(回调函数,[间隔的毫秒数])
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
定时器可能有很多，所以我们经常给定时器赋值一个标识符
2.3.2 回调函数
setTimeout() 这个调用函数我们也称之为回调函数callback
普通函数是按照代码顺序直接调用，而这个函数需要等待一定时间，时间到了才去调用这个函数，因此称为回调函数。以前我们学的点击事件也是回调函数。
2.3.3 停止定时器
window.clearTimeout(timeoutID)
该方法可以取消先前通过调用setTimeout()建立的定时器
<body>
<button>点击停止计时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function(){
console.log('时间到了');
},2000);
btn.addEventListener('click',function(){
clearTimeout(timer);
})
</script>
</body>
window可以省略，括号内的参数就是定时器的标识符
window.clearInterval(intervalID)
该方法可以取消先前通过调用setInterval()建立的定时器
<body>
<button class="begin">点击开始定时器</button>
<button class="stop">点击结束定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null;
begin.addEventListener('click',function(){
timer = setInterval(function(){
console.log('哈哈哈');
},1000);
})
stop.addEventListener('click',function(){
clearInterval(timer);
})
</script>
</body>
三、JS执行队列
3.1 单线程
Javascript语言的一大特点就是单线程，也就是说同一时间只能做一件事，这是因为Javascript专门脚本语言诞生的使命所致——Javascript视为处理页面中用户的交互，以及操作DOM而生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加之后再删除。单线程就意味着所有任务需要排队，前一个任务结束才会执行后一个任务。这样所导致的问题就是，如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
3.2 同步和异步
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许Javascript脚本创建多个线程，于是Javascript中出现了同步和异步
同步
前一个任务结束后再执行。后一个任务程序的执行顺序与任务的排列顺序是一致的，同步的。比如做饭，我们要烧水煮饭，等水开了之后再去切菜炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭，我们在烧水的同时利用间隔时间去切菜炒菜。
3.3 JS执行机制
- 先执行执行栈中的同步任务
- 异步任务放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行线，开始执行。
四、location对象
Window对象给我们提供了一个location属性，用于获取或设置窗体的url，并且可以用于解析url，因为这个属性返回的是一个对象，所以我们也将这个属性称为location对象。
4.1 URL
4.2 location参数的属性
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
console.log(location.href);
})
</script>
</body
4.3 location对象的常见方法
五、navigator对象
Navigator对象包含有关浏览器的信息，他有很多属性，我们最常用的是userAgent。该属性可以返回由客户机发送服务器的user -agent头部的值。
可以判断用户是使用哪个终端打开页面，实现跳转。
<script>
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))){
window.location.href = "";//手机
}else {
window.location.href = "";//电脑
}
</script>
六、 history对象
Window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的url
<body>
<a href="#">点我去往列表页</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
history.forward();
})
</script>
</body>
七、PC端网页特效
7.1 元素偏移量offset系列
offset即元素偏移量，我们使用offset系列相关属性可以动态地得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小、宽高
- 注意返回的数值都不带单位
offset系列常见属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin-top: 100px;
margin-left: 100px;
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
console.log(box.offsetTop);
console.log(box.offsetLeft);
</script>
</body>
</html>
注意宽高是包含padding、padding、width的
7.2 元素可视区client系列
client即客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态地得到该元素的边框大小、元素大小等
与offset区别
client不包含border边框
7.3 元素滚动scroll系列
scroll即滚动，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等
scrollHeight是实际内容的大小
clientHeight是盒子的大小
总结（一定要看哦！！！）
这就是我们最后一次写博客了，不知不觉讨论班也要接近尾声了。感谢同在蓝旭并肩作战坚持到最后的我们，也要感谢每一位耐心为我们解答问题的学长学姐。
一段文字送给大家
我也曾赴过琼林宴，我也曾打马御街前。惟愿此去经年，于万物众生中磊落做人，身怀赤诚，告诉世界何谓勇敢。人世间山水迢迢，路遥马急，借此，祝所有相遇:天高海阔，万事胜意，山水有来路，早晚复相逢。
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
