BOM：Browser Object Model（浏览器对象模型）
专门提供了用于操作浏览器的API - 没有标准，不像DOM由W3C来制定标准，但是大部分浏览器已经统一实现了，唯独老IE与众不同，相当于DOM使用也会较少
window对象：扮演着两个角色：
1、在前端/浏览器端，他代替了全局对象global，保存着全局变量和全局函数
window.变量名;
window.函数名(); - 只不过window可以省略不写
2、指代当前窗口本身
目的：优化用户的体验感，多为用户考虑
1、网页打开新链接的方式
1、替换当前页面，可后退
HTML：<a/ href="url">内容</a>
JS：open("url","_self")
2、替换当前页面，禁止后退：使用场景：结账后不允许后退
history对象：保存着当前窗口打开过的历史记录url，只有产生了窗口历史才能前进后退
location对象：保存着当前窗口正在打开的url
JS：location.replace("url") - 替换网址后页面肯定变化，但是替换并不叫跳转，不会产生任何的历史纪录
3、在新窗口打开，可以打开多个
HTML：<a/ href="url" target="_blank">内容</a>
JS：open("url","_blank")
4、在新窗口打开，只能打开一个：使用场景：打开结账页面时
HTML：<a/ href="url" target="自定义name">内容</a>
窗口的底层其实是有名字的，如果重新打开相同的名字，新打开的窗口会替换掉旧的窗口
JS：open("url","自定义name")
扩展：a标签的其他用处：
1、跳转
2、锚点
3、下载：<a href="xx.exe/zip/rar">下载</a>
4、打开：<a href="xx.txt/jpg...">图片/文本</a>
5、直接执行js操作：<a href="javascript:js代码;">图片/文本</a>
2、window窗口的属性和方法：
属性：
获取大小：
1、获取浏览器的完整的大小：outerWidth/Height
2、*获取浏览器的文档显示区域的大小：innerWidth/Height
3、获取完整屏幕的大小：没用，我们并不做桌面应用
screen.width/height
方法：
1、打开新窗口：var newW=open("url","自定义name","width=?,height=?,left=?,top=?");
2、关闭新老窗口：window/newW.close();
3、移动新窗口：newW.moveTo(x,y);
4、改变新窗口的大小：newW.resizeTo(new宽,new高);
5、定时器：
何时使用：只要过一段时间就希望执行的特效或操作，必须使用定时器
如何使用：
1、周期性：只要不停止会等待时间，反复不断的执行
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性：等待时间后只会执行一次，就结束
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
其实以后你不会是周期性还是一次性都无所谓，因为两者的底层是一样的，用哪个停止其实无所谓，甚至可以互换！
扩展
一、添加过度动画，js的执行速度>图片的加载速度，图片还没加载出来，js就已经执行完毕了，onload事件可解决，加载使用，等谁加载完毕后在执行
img.onload=function(){
}
二、*获取鼠标的位置：2步
1、获取事件对象event：在事件函数中传入一个形参e即可，自动接收到event对象
2、获取鼠标的位置：
1、鼠标相对于屏幕的位置：e.screenX/Y
2、鼠标相对于文档显示区域的位置：e.clientX/Y
3、*鼠标相对于网页的位置：e.pageX/Y
关不掉的广告案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
overflow: hidden;
}
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 400px;
background: pink;
text-align: right;
position: absolute;
right: 0;
bottom: 0;
transition: 1s;
}
button{
width:30px;
}
</style>
</head>
<body>
<div id="div">
<button id="btn"> x </button>
</div>
<script type="text/javascript">
btn.onclick=function(){
div.style.bottom="-100%";
setTimeout(()=>{
div.style.bottom="0%";
},Math.random()*5000);
}
</script>
</body>
</html>
