一、BOM 概述
Browser Object Model，BOM 浏览器对象模型
提供了独立于内容，与浏览器窗口进行交互的对象 ，核心对象是 window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
二、window 对象常见的事件
1、页面加载事件 onload
onload 事件在文档内容（包括图像、脚本文件、CSS文件等）加载完成后触发
有了该事件就可以不用把 JS 放在文档元素后了，可以写在元素上方
<script type="text/javascript">
window.addEventListener('load', function() { //相同的元素、相同的事件:addEventListener注册方式都有作用
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('我弹出了');
})
})
</script>
<button type="button">点击</button>
2、调整窗口大小事件 onresize
resize 在窗口大小产生变化时触发
该事件常用来完成响应式布局
<script type="text/javascript">
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
if (window.innerWidth < 800) { // 窗口宽度小于800px时，就隐藏div
div.style.display = 'none'; //innerWidth属性：窗口宽度
}
})
})
</script>
<div id=""></div>
三、定时器
1、定时器 setTimeout()
在延时时间（第二个参数）过后，执行函数（第一个参数）
<script type="text/javascript"> // window可以省略，直接使用setTimeout()
var timer1 = window.setTimeout(callback, 2000); // 第二个参数是延时时间，单位是毫秒，不写该参数时写时默认为0ms
var timer2 = window.setTimeout(callback, 4000); // 页面中可能有多个定时器，通常给定时器加标识符(名字)
function callback() {
console.log('+ 两秒');
}
</script>
setTimeout() 我们也称为回调函数（需要等待时间再去调用，而普通函数都是按顺序直接调用）
element.onclick = function() {} 和 element.addEventListener('click', function(){}) 里面的函数也是回调函数
2、清除定时器 clearTimeout()
用来停止 setTimeout() 计时器
<script type="text/javascript">
window.addEventListener('load', function() {
var timer = window.setTimeout(function() {
alert('太晚啦，已爆炸');
}, 3000);
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
clearTimeout(timer); //参数为要停止的定时器名称
})
})
</script>
<button type="button">解除爆炸</button>
3、定时器 setInterval()
每隔延时时间（第二个参数），反复执行函数（第一个参数）
<script type="text/javascript"> // window可以省略，直接使用setTimeout()
window.setInterval(function() { // 第二个参数是延时时间，单位是毫秒，不写该参数时写时默认为0ms
console.log('i love u '); // 页面中可能有多个定时器，通常给定时器加标识符(名字)
}, 1000);
</script>
4、清除定时器 clearInterval()
用来停止 setInterval() 计时器
<button type="button">点击停止计时器</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var timer = window.setInterval(function() {
console.log('好开心啊！');
}, 1000);
btn.addEventListener('click', function() {
window.clearInterval(timer);
})
</script>
四、JS 执行队列
1、JS 是单线程
（1）JS 是单线程
同一个时间只能做一件事。所有任务需要排队，前一个任务结束，才会执行后一个任务。
（2）存在的问题
如果 JS 执行时间过长，会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉
2、同步和异步
H5 提出 Web Worker 标准，允许 JS 创建多个线程，于是出现了 JS 同步和异步
（1）同步：前一个任务结束，再执行后一个任务
（2）异步：多个任务同时执行
3、同步任务和异步任务
（1）同步任务
同步任务都在主线程上
（2）异步任务
JS 的异步任务通过回调函数实现，一般异步任务有以下三种类型：
- 普通事件：onclick、resize 等
- 资源加载：onload、error 等
- 定时器：setInterval、setTimeout 等
异步任务相关的回调函数添加到任务队列（消息队列）中
4、JS 执行机制
（1）JS 执行机制
① 先执行主线程的同步任务（异步任务放入任务队列中）
② 主线程中的同步任务执行完毕，再按次序读取任务队列中的异步任务
③ 被读取的异步任务结束等待状态，进入主线程，开始执行
（2）事件循环 event loop
由于主线程不断地重复获得任务、执行任务、再获取任务、执行，所以这种机制被称为事件循环
五、location 对象
window 对象的 location 属性用于获取或设置窗口的 URL，并且可以解析 URL；
因为这个属性返回的是一个对象，所以 location 属性也称为 location 对象；
调用的时候可以省略 window（即 window.location 直接省略 window）
1、属性
<button type="button">获取location属性</button>
<script type="text/javascript">
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
//1.location.href 获取或设置整个 URL
console.log('URL:' + window.location.href);
//2.location.host 返回域名
console.log('host:' + window.location.host);
//3.location.port 返回端口号，未写返回空字符串
console.log('port:' + window.location.port);
//4.location.pathname 返回路径
console.log('pathname:' + window.location.pathname);
//5.location.search 返回参数
console.log('search:' + window.location.search);
//6.location.hash 返回片段（# 后面的内容），常见于链接、锚点
console.log('hash:' + window.location.hash);
window.location.href = 'http://www.baidu.com';
})
</script>
2、方法
<button type="button" class="btn1">assign</button>
<button type="button" class="btn2">replace</button>
<button type="button" class="btn3">reload</button>
<script type="text/javascript">
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn3 = document.querySelector('.btn3');
btn1.addEventListener('click', function() {
// 1.assign() 跳转页面(重定向页面)
location.assign('http://www.baidu.com'); //记录浏览历史，可以后退
})
btn2.addEventListener('click', function() {
// 2.replace() 替换当前页面
location.replace('http://www.baidu.com'); //不记录浏览历史，不能后退
})
btn3.addEventListener('click', function() {
// 3.repload() 重新加载页面
location.reload(); // 不传参数 就是刷新 f5
}) // 传入参数 true 就是强制刷新 ctrl+f5
</script>
六、navigator 对象
navigator 对象包含有关浏览器的信息；
最常用的属性是 userAgent；
下面前端代码可以判断用户用电脑端还是移动端打开页面，并实现跳转：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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 = "phone.html"; //如果是移动端，就跳转到其他界面
}
</script>
</head>
<body>
<span>你好，你打开的是PC浏览器</span>
</body>
</html>
七、history 对象
window 对象提供 history 对象与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的 URL；
常用的方法如下
<p><a href="http://www.baidu.com">百度</a></p>
<button type="button" class="btn1">back</button>
<button type="button" class="btn2">forward</button>
<button type="button" class="btn3">go</button>
<script type="text/javascript">
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn3 = document.querySelector('.btn3');
btn1.addEventListener('click', function() {
// 1.back() 后退
window.history.back();
})
btn2.addEventListener('click', function() {
// 2.forward() 前进
window.history.forward();
})
btn3.addEventListener('click', function() {
// 3.go(参数) 前进后退
window.history.go(1); //参数为 1 前进1个页面
}) //参数为-1 后退1个页面
</script>
history 对象一般在实际开发中比较少用，往往会在 OA 系统中见到