BOM介绍
BOM的概念
BOM（Browser Object Model）称为浏览器对象模型，能够获取浏览上所有的内容及相关操作。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性。我们可以通过这些属性和方法去对浏览器进行操作。
window对象
window对象是BOM的顶层(核心)对象。window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应。
window对象的方法
打印方法
console.log(window); //window 对象 Window的构造函数
//常用的弹窗方法及打印方法
window.console.log('hello') //console.log() window可以省略的
console.log('日志') //控制台 log日志 以日志的形式打印
console.error('错误') //以错误的形式打印
console.warn('警告') //以错误的形式打印
console.debug('测试') //以错误的形式打印
console.info('信息提示') //以错误的形式打印
弹窗方法
//弹窗
window.alert('hello') //弹提示窗
var isTrue = confirm('你确认要删除吗') //交互框 true确认 false取消 返回
console.log(isTrue);
var str = prompt('请输入你的手机号') //输入框 他会有个输入框让你输入返回对应的你输入的内容 （string的内容）
console.log(str);
打开关闭方法
//打开 open 关闭 close
// 第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参数为设置的参数（窗口的高度 宽度等等）
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
// height=100 窗⼝⾼度；
// width=400 窗⼝宽度；
// top=0 窗⼝距离屏幕上⽅的象素值；
// left=0 窗⼝距离屏幕左侧的象素值；
// toolbar=no 是否显⽰⼯具栏，yes为显⽰；
// menubar，scrollbars 表⽰菜单栏和滚动栏。
// resizable=no 是否允许改变窗⼝⼤⼩，yes为允许；
// location=no 是否显⽰地址栏，yes为允许；
// status=no 是否显⽰状态栏内的信息（通常是⽂件已经打开），yes为允许；
window.close() //关闭当前的窗口 （关闭浏览器只能有一个页面）
改变位置方法
//moveBy 一个是x轴的距离 y轴的距离
window.moveBy(100,100) //X+100 Y+100
//moveTo 一个x轴 一个y轴
window.moveTo(200,200) //X=200 Y=200
location对象（重点）
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。
事实上，location对象是window对象的属性，也是document对象的属性; 所以window.location和document.location等效。
location对象的属性
console.log(location.hash) //哈希 #后面带的值 *
console.log(location.host) //主机 域名 ip地址+端口号
console.log(location.hostname) //主机名 ip地址 （127.0.0.1表示本机地址和localhost是一样的）
console.log(location.protocol) //协议 用于通信 （基于tcp/ip）http（明文传输） https（安全）（加密过）
console.log(location.port) //端口号 1--65525 （1-100的端口电脑占用了）http默认的端口80 https默认端口443
console.log(location.href) //链接的地址 也可以设置
console.log(location.search); //?后面带的值 一般是get请求传输数据的时候 *
console.log(location.origin); //跨域
console.log(location.pathname); //路径名 获取的除了协议和ip地址加端口号后面的东西
location对象的方法
//assign跳转页面
location.assign(‘http://www.baidu.com’);
//replace替换页面
location.replace(“http://www.baidu.com”);
//reload重新加载页面
location.reload(); //最有效的重新加载,有缓存加载
history对象（重点）
history对象是window对象的属性，它保存着用户上网的记录,从窗口被打开的那一刻算起。
history对象的属性
history.length; //history对象中的记录数
history.state; //状态存储的对象
history.scrollRestoration //滚动栏恢复
history对象的方法
history.back(); //前往浏览器历史条目前一个URL, 类似后退
history.forward(); //前往浏览器历史条目下一个URL, 类似前进
history.go(-1); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)
navigator对象（了解）
console.log(navigator.appName); //浏览器名称
console.log(navigator.appVersion); //浏览器版本
console.log(navigator.platform); //操作系统
路由（拓展内容）
前端路由：根据不同的访问路径来渲染不同的内容（组件）
后端路由：根据对应的接口地址来访问不同的功能
前端路由主要分为三种
1、页面路由（页面跳转 刷新操作）
location.href
location.assign()
location.replace()
history.back()
history.forward()
2、hash路由（使用hash来实现 后面必须带# 不然不会刷新页面）
window.onhashchange = function(){
console.log('hash值变了')
}
3、H5路由（history里面state进行监听）
- history.pushState() 加一个历史页面（地址变了 不会刷新）
- history.replaceState() 替换历史页面 （地址变了 不会刷新）
