BOM（Browser Object Model），中文名称“浏览器对象模型”。和DOM相对应，DOM提供的是操作文档元素的接口，那么BOM提供的就是操作浏览器行为的接口。JavaScript的基础中，除了基本语法和DOM外，BOM也是十分重要的。本节主要学习BOM的基本操作，了解BOM有哪些特点。
概述
BOM让我们可以通过JavaScript来操作浏览器，为此BOM提供了一些基本的对象来达成这个目标。
- window 代表浏览器的整个窗口，也是全局对象，之后的对象可以直接使用，也可以作为window的方法来调用。
- navigator 代表浏览器的信息，可用于判断浏览器的类型。（Edg Firefox Chrome等）
- location 代表浏览器的地址栏信息，用于获取地址或者让浏览器跳转页面
- history 代表浏览器的历史，用于进行浏览器页面的前后跳转。若关闭浏览器后再打开，则前一次访问的历史会被清除。
- screen 代表用户屏幕信息，可以获取到用户的显示器相关的信息。
1.navigator
该对象最主要的作用是获取浏览器的信息，识别不同类型的浏览器。历史原因，该对象中的大部分方法都不能帮助我们识别浏览器，目前我们一般只使用一个方法userAgent。
该方法的返回值是一个字符串，包含了浏览器相关的信息，简称UA。不同浏览器的UA都是不同的，因此它可以作为识别浏览器的依据。
let ua = navigator.userAgent;
console.log("当前浏览器的UA是" + ua);//控制台会打印出浏览器相关信息，可以用不同浏览器查看，发现都是不一样的。
UA中一般会包含有浏览器的名称，只要匹配到这些名称我们就可以实现简单的浏览器判别。要匹配字符串中的特定字符片段，使用正则表达式是最好的。
if (/Firefox/i.test(ua)) {
alert("火狐浏览器");
}else if (/chrome/i.test(ua)) {
alert("chrome浏览器");
}else if (/msie/i.test(ua)) {
alert("IE浏览器");
//碎碎念，连微软都要停止支持IE浏览器了（）
2.location
location中包含有浏览器浏览的网页的地址信息，我们依据这个特性可以实现浏览器的跳转。location对象包含一个常用的属性和三个常用的方法。
- 属性 href
console.log(location.href);//打印页面的URL
location.href = "https://www.baidu.com"//页面将会自动跳转到百度首页
- 方法一：
location.assign(str);//效果和location.href是一样的，str是字符串形式的要跳转页面的地址。
location.assign("https://www.baidu.com");
- 方法二：
location.reload();//重新加载当前页面，括号中传入参数true还会清除缓存并且重新加载页面
- 方法三：
location.replace(str)//也是跳转页面，和assign不同之处在于会直接替代当前页面并且不会生成history。
3.history
浏览器的历史。一般的浏览器的左上角的位置都有一个这样的功能区域。
点击它们我们可以实现返回上一个或者下一个我们之前浏览过的页面，history对象也可以实现这样的功能。这里也主要了解history对象的一个属性和三个常用方法。
- 属性：
history.length//获取浏览器历史中URL的数量，可以理解为访问的页面数量。
这个数量是单次有效的，也就是说如果中途我们关闭了浏览器再打开。这个数值会被重置为1。
- 方法一：
history.back();//返回上个访问的页面 类似浏览器的 回退 按钮
- 方法二：
history.forward();//跳转到下一个访问到的页面，类似浏览器的 前进 按钮
- 方法三：
history.go();//页面跳转
该方法需要传入一个整数作为参数，大于零表示向前跳转多少个页面，小于零表示回退多少个页面。输入零则表示重新加载当前页面。
定时器
我们在浏览一些网站特别是电商网站的时候，经常能看见页面的某个盒子中的图片，间隔一定的时间就会切换为其他的图片。这就利用了定时器的功能。常见的使用定时器的方法主要有setInterval()和setTimeout()。
setInterval()
该方法的的作用是调用一段代码，循环执行，两次执行之间会有一定的时间间隔。方法需要传入两个参数。
- 参数一 回调函数，内部封装需要循环执行的代码。
- 参数二 时间间隔，这里的单位为毫秒。
例子，实现一个每隔一秒加一的功能
let num = 0;
setInterval(fn, 1000);
function fn() {
num++;
console.log(num);
};
控制台每隔一秒就会打印出一个相比上次结果加一的数字。
setTimeout()
该方法会调用一段代码，这段代码不会立即执行，而是在等待一定的时间后开始执行。参数和setInterval（）一样有两个。
- 参数一 回调函数，内部封装代码。
- 参数二 间隔的时间，代码等待执行的时间。
例子，让页面中的一个元素在5秒后消失。
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="box"></div>
<script>
let box = document.getElementById("box");
setTimeout(fn, 5000);
function fn() {
box.style.display = "none";
}
</script>
</body>
fn中的代码在页面加载完成的5秒之后才会被执行。
清除定时器
实际开发中，我们并不希望定时器一直存在，尤其是setInterval这种定时器。所以我们需要清除定时器，只需要将set改成clear即可。
定时器的返回值是一个数字，它是定时器的唯一标识。我们将这个返回值赋给一个变量，然后使用
clearInterval(变量名)
clearTimeout(变量名)
这样定时器就会被清除。
总结
利用定时器的这些功能，改进图片切换的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换 定时器版本</title>
<style>
#img {
width: 800px;
height: 500px;
margin: 100px auto;
text-align: center;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="img">
<img src="image/img1.jpg" alt="">
<button id="start">开始</button>
<button id="stop">停止</button>
</div>
<script>
let timer;
let img = document.getElementsByTagName("img")[0];
let btn01 = document.getElementById("start");
let btn02 = document.getElementById("stop");
let imgArray = ["image/img1.jpg","image/img2.jpg", "image/img3.jpg", "image/img4.jpg"];
let index = 0;
btn01.onclick = function () {
clearInterval(timer);//防止重复生成定时器
timer = setInterval(function () {
img.src = imgArray[index];
index++
if (index == imgArray.length) {
index = 0
}
},1000)
}
btn02.onclick = function () {
clearInterval(timer);
}
</script>
</body>
</html>
