BOM的概述：
1、BOM(全称：bowser object model)浏览器对象模型，是用于操作浏览器的相关的内容，其核心对象是window。
2、BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
3、BOM是一个缺乏规范的东西，为了保证规范性产生了一系列共有对象来解决这个问题。沿用至今，但是这些共有对象也存在对应的兼容问题，直到w3c的介入（ie10以后），兼容问题才得到了保证。
BOM的构成：
1、Document：文档对象
2、Location：地址栏对象
3、History：历史对象
4、Screen：屏幕对象
5、Navigator：导航对象
6、Frames：子窗口，也是一个window
7、window
window的相关方法和属性：
window的概述：
1、window属于浏览器的global对象（顶层对象）。
2、所有的全局函数及全局变量都是属于window的。
3、在调用的时候window可以被省略。
相关的方法：
浏览器的控制台打印的方法：
1、日志打印：console.log();
2、错误打印：console.error();
3、信息打印：console.info();
4、警告打印：console.warn();
5、调试打印：console.debug();
弹窗相关的方法：
1、alert() ：提示框
2、prompt() ：输入框， 点击确定返回输入的内容，点击取消返回null
3、confirm() ：交互框， 点击确定返回true，点击取消返回false
窗口打开和关闭的方法：
1、poen() ：打开新窗口，(window.open()，不传参会打开一个无标题页面)
2、window.close() ：关闭当前窗口
改变窗口大小的方法：
1、resizeTo() ：直接改变大小到对应的宽高（第1个参数是宽，第2个参数是高，都是number类型）
//直接改变大小到对应的宽高 w 100 h 100
window.resizeTo(100,100)
2、resizeBy()：在原本的基础上增加对应的宽高（第1个参数是宽，第2个参数是高，都是number类型）
//在原本的基础上增加对应的宽高 w 300 h 300
window.resizeBy(200,200)
改变窗口位置的方法:
1、moveTo() ：//设置对应的位置 （x，y）
//设置对应的位置 X 200 Y 200
window.moveTo(200,200)
2、moveBy() ：//在原本的位置上增加对应的距离 （x，y）
//在原本的位置上增加对应的距离 X 300 Y 300
window.moveBy(100,100)
改变滚动栏位置的方法：
1、scrollTo() ：将对应的滚动栏移到对应的位置（回到顶部，将对应的y变为0）（x，y）
//将对应的滚动栏移到对应的位置
window.scrollTo(500,500)
2、scrollBy() ：在原本的基础上进行位置的变化（x，y）
//在原本的基础上进行位置的变化
window.scrollBy(100,100)
调用打印机的方法：
print() ：调用打印机
//打印方法 print 调用打印机
window.print()
查找方法：
find() ：查找方法
//查找方法
window.find()
窗口聚焦和失焦的方法：
1、失去焦点：window.blur()
//失去焦点
window.blur()
2、聚焦：window.focus()
//聚焦
window.focus()
相关的属性：
1、parent :获取窗口的父窗口
window.parent;//得到对应的父窗口
2、innerHeight：获取高度
console.log(window.innerHeight)//获取窗口的高度,对应的白色部分
3、innerWidth：获取宽度
console.log(window.innerWidth)//获取窗口的宽度,对应的白色部分
Document 文档对象
1、document对象是属于BOM的组成部分，里面的一些的相关操作和对应的属性是属于DOM操作。
2、document表示的是对应的HTML文档，用于操作对应的HTML文档。
Location 地址栏对象 （*）
相关的属性：
1、hash 获取#后面的值 *
// hash: "" //hash获取对应的url里面#后面的内容 (包含#)
console.log(location.hash)
2、search 获取?后面的值 *
// search 获取?后的内容
//一般在书写对应的地址的时候 我们一般是不会共有#和? 如果需要共有先写?后面再接#
console.log(location.search);
3、port 端口号
// port: "5500"
console.log(location.port)//端口号 1-65525 （1-100的端口一般不会占用 电脑对应的程序占用了）
4、protocol 协议
//浏览器http协议 走的时候80的端口 https协议走的时候 占443端口
// protocol: "http:
//协议 通信协议 用于通信的 常见的通信相关协议 tcp（网络传输 http（不安全） https（安全）） 连接 udp 快递点
console.log(location.protocol);
5、host 主机
// host: "127.0.0.1:5500" //主机 ip地址 端口号 （域名）
console.log(location.host);
6、hostname 主机名
// hostname: "127.0.0.1" //主机名 对应的ip的相关名
console.log(location.hostname);
7、pathname 路径地址
// pathname: "/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html" //路径名 就是对应的端口号后面的内容
console.log(location.pathname)//获取到文件名后缀结束
8、href 对应的url地址 *
// href: "http://127.0.0.1:5500/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html"
console.log(location.href)//url地址 全部链接地址
//href也可以进行赋值 他的赋值就是将对应的url地址 那么就会跳转页面
// location.href = 'http://www.taobao.com'
9、origin 对应的跨域地址
// origin: "http://127.0.0.1:5500" //跨域地址设置（协议 端口号 域名 三者有一个不一样不让访问 产生跨域）
console.log(location.origin);
相关的方法：
1、reload 重新加载
location.reload()//重新加载 刷新
//里面可以传递一个boolean类型的值 true 表示从服务器重新加载（慢） false 从本地缓存中加载（快）
location.reload(false)
2、assign 指定对应的地址进行跳转（有历史）
//指定跳转对应的地址 有历史记录
location.assign('http://www.weibo.com')
3、replace 替换当前地址进行跳转 （没有历史）
// replace 替换当前的地址跳转到对应的地址 没有历史记录
location.replace('http://www.jd.com')
注意：对应的href进行赋值也可以跳转
history 历史对象 （*）
概述：history里面包含了对应的历史页面，是对于历史页面进行相关操作（页面替换，页面的跳转）
相关的属性：
1、length属性 （历史页面个数）
console.log(history.length);//历史页面个数
2、state属性 （状态 存储对应的值） *
console.log(history.state);//state状态 里面可以存储对应的数据 默认请求为null
3、scrollRestoration （滚动栏恢复行为 auto、 manual）
console.log(history.scrollRestoration);//滚动的位置恢复行为 默认为auto keep-alive的底层实现之一
//auto，将恢复用户已滚动到的页面上的位置；manual，未还原页上的位置。用户必须手动滚动到该位置。
相关的方法
1、forward 前进
history.forward()//前进
2、back 后退
history.back()//后退
3、go 去任意历史页面（当前页面为0 大于0前进 小于0后退）
history.go(-1)//去任意历史页面 传递值一定为整数 当前页面的值为0 比0大就是前进 比0就后退
4、pushState ：改变当前的url地址(不会进行跳转，不会刷新操作) ，会改变对应的state的值，state的值（可以是任意类型的数据） 名字（建议空值） url地址
//如果传入对应的url，会改变对应的url地址(并非跳转),会新增对应的历史页面,会给对应的state进行赋值
history.pushState('hello','','./history讲解.html')//会产生跨域
5、replaceState ：改变当前的url地址(不会进行跳转，不会刷新操作) ，不会新增新的历史页面，把当前历史页面进行替换，会改变对应的state的值
history.replaceState('您好','','./history讲解.html')
//replaceState 也会改变对应的url地址，也不会进行跳转（刷新），也会改变对应的state的值
pushState和replaceState的区别
1、pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 （并非跳转 不会刷新）
2、pushState或者replaceState 会给对应的state进行赋值
3、pushState 会新增对应新的历史页面 ，replaceState 不会新增（会替换当前历史页面）
Screen 屏幕对象
相关的属性：
1、width 屏幕的宽度
console.log(screen.width);//获取屏幕宽度
2、height 屏幕高度
console.log(screen.height);//获取屏幕的高度
3、availHeight 可占用的最大屏幕高度
console.log(screen.availHeight);//可占用的最大高度
4、availWidth 可占用的最大屏幕宽度
console.log(screen.availWidth);//可占用的最大宽度
5、availLeft 可占用的空间离桌面的左边距离
console.log(screen.availLeft);//表示当前可占用空间离左边的距离
6、availTop 可占用的空间离桌面的上边距离
console.log(screen.availTop);//表示当前可占用空间离上面的距离
Navigator 导航对象
概述：他主要是用于获取用户浏览器及系统相关的设置以及内容
相关的属性 ：
1、userAgent 表示当前用户的系统信息以及对应的浏览器信息
//用户相关的系统信息及对应的浏览器信息
console.log(navigator.userAgent);
路由的扩展：
概念：路由的核心就是分发，将对应的内容分发对应的路由地址。学习BOM核心，就是为了学习路由（路由的底层BOM）
前端路由（渲染）
概念：根据对应的路由地址来渲染不同页面
前端路由的分类：
1、页面路由（会进行页面的跳转 页面会刷新）
2、hash路由（根据对应的hash值来渲染对应的页面 不会进行页面的刷新操作）
3、history路由 （根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作）
1)需要对应得pushState调用或者replaceState调用
2)在改变了对应得state值以后 调用对应得forward方法或者是back方法或者是go方法
补充内容：
1、SPA 单页应用程序（只有一个页面）里面常用的路由是hash以及history路由
2、在对应的单页应用程序中我们常用vue和react等框架来进行开发，这就导致了我们对应的vue和react中对应的路由模式常用hash模式及history模式（默认设置的路由模式都是hash模式）
后端路由 （业务）
概念：根据对应的路由地址来处理不同的业务（访问不同的接口）
