1、BOM基础
1、BOM就是浏览器对象模型（browser object model），BOM提供了很多对象，window，navigator，screen，history，location，document，event等等。
2、window对象
1、window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JS访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
2、在代码中我们声明一个全局变量可以通过 window.变量名 或者 var 变量名。这两种方法是等价的。所以所有的全局变量和全局方法都被归在了window上面。
3、window给我们提供了很多方法，下面我们来说三个弹出窗口的方法：
（1）window.alert("contert"):显示带有一段消息和一个确认按钮的警告窗口
（2）window.confirm("message"):显示一个带有指定消息和OK以及取消按钮的对话框，但是confirm的返回值类型是BOOL类型，点击确定返回true，点击取消返回false：下面我们展示一段代码：我们需要定义一个变量来接受confirm的值，根据值的false或者true来继续下面的操作。下面这段代码就是点击删除按钮后，点击确定，div被隐藏，点击取消啥事都么有。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="box" id="box">
iphone6 <input type="button" value="删除" id="deleteIphone">
</div>
<script>
var deleteIphone=document.getElementById("deleteIphone");
var box=document.getElementById("box");
deleteIphone.onclick=function(){
var result=confirm("确定要删除吗");
result?box.style.display="none":null; //这里的删除节点的操作我们后面再学习
}
</script>
</body>
</html>
在浏览器中的效果：
（3）window.prompt(text,default):text是对话框中显示的纯文本，defaultText是默认的输入文本，点击取消按钮返回null，点击确定，返回输入字段当前显示的文本。下面展示一段代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="box" id="box">
iphone6 <input type="button" value="删除" id="deleteIphone">
</div>
<script>
var deleteIphone=document.getElementById("deleteIphone");
var box=document.getElementById("box");
deleteIphone.onclick=function(){
var result=prompt("输入你要删除的原因\n请慎重","产品太垃圾不想用") //文本中换行需要使用\n
result==null?null:alert(result);
}
</script>
</body>
</html>
在浏览器中的效果如下：
4、有关窗口打开和关闭的方法window中也有
（1）window.open(pageURL,name,parameters):打开一个新的浏览器窗口或者查找一个已命名的窗口，其中pageURL：子窗口的路径、name：子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用），parameters：窗口参数（各个参数使用逗号隔开，可以有width：窗口宽度，height:窗口高度，left，窗口的x坐标，top窗口的Y坐标，toolbar：是否显示浏览器的工具栏，menubar：是否显示菜单栏，scrollbars：是否显示滚动条，location：是否显示地址字段，status：是否添加状态栏）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="box" id="box">
iphone6 <input type="button" value="删除" id="deleteIphone">
</div>
<script>
window.onload=function(){
window.open("https://www.baidu.com/","baidu","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
}
</script>
</body>
</html>
上面这个例子就是在窗口加载完毕在左上角自动打开一个页面为百度页面的小窗口。
（2）window.close():关闭当前窗口
5、window中的超时调用和间隙调用
（1）setTmeout(code,millisec)：在指定的毫秒数后去执行我们指定的代码或者表达式，code就是我们要指定的代码，milliset就是等待的毫秒数。code建议使用匿名函数或者函数调用，在es6之中我们使用的是匿名函数：
注意：setTimeout实际上会返回一个ID值，通过它可以取消超时调用，所以我们可以吧setTimeout的返回值放在一个变量中，通过clearTimeout(id_of_settimeout)来取消延迟操作的代码块。如下所示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="box" id="box">
iphone6 <input type="button" value="删除" id="deleteIphone">
</div>
<script>
var setTimeID=setTimeout(() => {
alert("1秒之后展示");
}, 1000);
clearTimeout(setTimeID);
</script>
</body>
</html>
（2）window.setInterval(code,millisec):每隔指定毫秒数之后去执行指定代码，和上面setTimeout的语法一样的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="box" id="box">
iphone6 <input type="button" value="删除" id="deleteIphone">
</div>
<script>
var setInt=setInterval(() => {
alert("1秒之后展示");
}, 1000);
setTimeout(() => {
clearInterval(setInt);
}, 3000);
</script>
</body>
</html>
3、Location对象
1、location对象提供了与当前窗口加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
2、location.href:返回加载页面的完整URL，与window.location.href的是一样的。
（1）location.href：可以返回当前页面的完整的URL
（2）location.href=" URL"，可以实现网页的跳转，并在浏览记录中生成一条浏览记录，页面也有返回键。
3、location.hash:返回URL中的hash（#号后跟零或者多个字符），如果不包含则返回空字符串。
（1）location.hash 可以获取到我们网页当前的锚点
（2）location.hash="#某元素的id名称" 可以是网页跳转到id名称的锚点的位置：如下代码所示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.top{height: 600px;background: red;}
.middle{height: 600px;background: blue;}
</style>
</head>
<body>
<div class="top" id="top"></div>
<div class="middle" id="middle"></div>
<input type="button" value="返回顶部" id="backTop">
<script>
var BackTop=document.getElementById("backTop");
BackTop.onclick=function(){
location.hash="#top";//跳转到id为top的元素div处
alert(location.hash);//打印出当前页面的hash
}
</script>
</body>
</html>
4、location.host:返回服务器名称和端口号（如果有）
5、location.hostname:返回不带端口号的服务器名称
6、location.pathname:返回URL中的目录和文件名
7、location.port:返回URL中指定的端口号，如果没有，返回空的字符串
8、location.protocol:返回页面使用的协议
9、location.search:返回URL的查询字符串，这个字符串以问号开头
10、location.replace():重新定向URL，但是使用location.replace()不会在历史记录中生成新的记录，而且跳转后回退按钮是不能用的，和我们之前使用的location.href主要就是这两个区别。
11、location.reload():重新加载当前显示的页面（一般我们都将reload代码放在JS代码的最后面）
（1）location.reload()如果页面从上一次请求以来没有发生改变，那么location.reload()方法就从缓存中加载页面。
（2）location.reload(true)从服务器上重新加载，不管自上一次加载以来有没有变化。
4、history对象
1、history对象保存了用户在浏览器中访问页面的历史记录。
2、history.back():回到历史记录的上一步，相当于使用了history.go(-1)。这里的history.go（）中的数字也可以是-2，-3，可以回到历史记录的前两步，前三步。
3、history.forward():回到历史记录的下一步，相当于使用了histtory.go(1)
4、history.go(n/-n):回到历史记录的后N步/前N步，前提是历史记录里有N步，不然是找不到的。
5、Navigator对象
1、这个对象提供了使用的浏览器和操作系统的基本信息，通过这个对象可以知道使用的什么浏览器。
2、掌握Navigator对象额userAgent属性，可以判断浏览器的类型，判断设备的终端是移动还是PC。
3、下面这段代码我们来展示一下，怎么获取浏览器的信息：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.top{height: 600px;background: red;}
.middle{height: 600px;background: blue;}
</style>
</head>
<body>
<script>
var information=navigator.userAgent.toLowerCase();
var kindexplorer;
information.indexOf("chrome")>-1?kindexplorer="是chrome浏览器":kindexplorer="不是chrome浏览器";
alert(kindexplorer+",浏览器的信息如下："+information);
</script>
</body>
</html>
在浏览器中的效果如下：
6、screen对象
1、screen对象包含有关客户端显示屏幕的信息，最常用的两个属性就是screen.availWidth和screen.availHeight。
2、screen.availWidth:返回可用的屏幕宽度。（可用的屏幕宽高就是我们的浏览器窗口除去各种工具栏，标题栏后可以的宽高）
3、screen.availHeight:返回可用的屏幕高度。
4、获取窗口文档显示区的高度和宽度，可以使用window.innerWidth和window.innerHeight，获取显示屏幕的宽度和高度，我们可以使用screen.availWidth和screen.availHeight。
5、下面的代码展示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.top{height: 600px;background: red;}
.middle{height: 600px;background: blue;}
</style>
</head>
<body>
<script>
alert("屏幕的高度为："+screen.availHeight+";"+"屏幕的宽度为："+screen.availWidth+'\n'
+"窗口文档显示区的高度："+window.innerHeight+";"+"窗口文档显示区的宽度为："+window.innerWidth)
</script>
</body>
</html>
在浏览器中的效果为下：这里是打开了控制台，所以窗口文档显示区的高度实际是屏幕的高度减去了控制台的高度和alert提示框所占用的部分高度，所以窗口文档显示区的高度比屏幕的高度低了很多。
