BOM的概述：
bom称为浏览器对象模型（bowser object model），也就意味着它可以获取浏览器上的所有内容以及相关的操作。BOM是一个缺乏规范的东西，为了保证它的规范性，产生了一系列的共有对象来解决这个问题，沿用至今，但是共有对象也存在兼容问题，直到w3c的介入（ie10以后），它的兼容问题就得到了保证。
BOM的共有对象以及相关的结构
window的相关属性及相关方法
概述：window属于浏览器的global对象（顶层对象），所有的全局函数以及全局变量都是属于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)标题 第三个参数为设置的参数（窗口的高度 宽度等等）
//不传参的情况下会打开一个无标题页面
//第二个参数
//_blank表示新的页面中打开
//_self表示本页打开
window.open('http://www.baidu.com','百度','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
//改变大小的方法
//改变对应的窗口大小
//resizeBy
window.resizeBy(200,200) //width+200 height+200
//resizeTo
window.resizeTo(200,200) //width=200 height=200
//打印方法
//print打印方法 调用打印机
window.print()
//聚焦和失焦的方法
//focus 聚焦 blur 失焦
window.focus()
window.blur()
//查找方法
//find查找 ctrl+f
window.find()
//滚动栏方法
//滚动栏位置改变 初始位置 x:0,y:0
window.scrollBy(100,100)//原本的位置 x+100 y+100
window.scrollTo(500,500)//到达位置 x=500 y=500 //通常用来回到顶部相关属性
-
获取窗口的父窗口 parent
window.parent //得到一个父窗口-
innerHeight 获取高度 innerWidth 获取宽度
//获取窗口的大小 获取宽高 对应的白色部分
console.log(window.innerHeight);
console.log(window.innerWidth);Document文档对象
-
document对象是BOM的组成部分，他里面的一些相关操作和对应的属性是DOM操作，具体的内容在对应的DOM中会提到。
-
document表示的是对应的HTML文档，它是用于操作对应的HTML文档的。
Location地址栏对象（*）
属性
-
hash 获取#后面的值 *
-
search 获取?后面的值 *
-
port 端口号
-
protocol 协议
-
host 主机
-
hostname 主机名
-
pathname 路径地址
-
href 对应的url地址 *
-
origin 对应的跨域地址
console.log(window.location);
//相关属性
// hash: "" //hash获取对应的url里面#后面的内容（包含#）
console.log(location.hash);
// host: "127.0.0.1:5500" //主机 IP地址 端口号（域名）
console.log(location.host);
// hostname: "127.0.0.1" //主机名 对应的IP的相关名
console.log(location.hostname);
// href: "http://127.0.0.1:5500/code/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'
// origin: "http://127.0.0.1:5500" //跨域地址设置（协议 端口号 域名 三者只要有一个不一样则不让访问 产生跨域）
console.log(location.origin)
// pathname: "/code/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html" //路径名 就是对应的端口号后面的内容
console.log(location.pathname) //获取到文件名后缀结束
// port: "5500"
console.log(location.port) //端口号 1-65525（1-100的端口一般不会占用 电脑对应的程序占用了）
//浏览器http协议 走的是80的端口 https协议走的是 443端口
// protocol: "http:"
//协议 通信协议 用于通信的 常见的通信相关协议 tcp（网络传输 http（不安全） https（安全）） 连接 udp 快递点
console.log(location.protocol);
//search 获取?后面的内容
console.log(location.search)
//一般在书写对应地址的时候 我们是不会共用search?和hash#的，但在需要共用search?和hash#的时候我们就得先写search?后面再接hash#方法
-
reload 重新加载
// reload 重新加载 刷新
// location.reload()
//里面可以传递一个boolean类型的值 true表示从服务器加载（慢） false表示从本地缓存中加载（快）
location.reload(false)-
assign 指定对应的地址进行跳转（有历史记录）
//指定跳转对应的地址 有历史记录
location.assign('http://www.weibo.com')-
replace 替换当前地址进行跳转（没有历史记录）
// replace 替换当前的地址跳转到对应的地址 没有历史记录
location.replace('http://www.jd.com')对应的href进行赋值也可以跳转
history历史对象（*）
概述：history它里面包含了对应的历史页面，他是对应历史页面进行相关操作（页面替换，页面的跳转）
属性
length属性（历史页面个数）
state属性（状态 存储对应的值）*
scrollRestoration属性（滚动栏恢复行为 auto、manual）
console.log(history);
console.log(history.length);//历史页面的个数
console.log(history.state);//state状态 它里面可以存储对应的数据 默认请求为null
console.log(history.scrollRestoration);//滚动栏的位置重置 默认为auto keep-alive的底层实现之一
// auto
// 将恢复用户已滚动到的页面上的位置。
//manual
//未还原页上的位置，用户必须手动滚动到该位置。方法
-
forward 前进
history.forward()//前进-
back 后退
history.back()//后退-
go 去任意历史页面（当前页面为0 大于0前进 小于0后退）
history.go()//去任意历史页面 传递值一定为整数 当前页面的值为0 比0大就是前进 比0小就是后退pushState
history.pushState('hello','','./history讲解.html')//会产生跨域
//pushState 如果传入对应的url 它会改变对应的url地址（并非跳转）
//pushState 会新增对应的历史页面
//pushState 会给对应的state进行赋值
console.log(history.length);
console.log(history.state);
console.log(history)replaceState
history.replaceState('您好','','./history讲解.html')
//replaceState 不会新增新的历史页面 把当前历史页面进行替换
//replaceState 也会改变对应的url地址 也不会进行跳转（刷新）
//replaceState 也会改变对应的state的值
console.log(history.length);
console.log(history.state);
console.log(history)pushState和replaceState的区别
-
pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址（并非跳转 不会刷新）
-
pushState或者replaceState 会给对应的state进行赋值
-
pushState 会新增对应新的历史页面 replaceState 不会新增（他会替换当前历史页面）
Screen屏幕对象
属性
-
width 屏幕的宽度
-
height 屏幕高度
-
availHeight 可占用的最大屏幕高度
-
availWidth 可占用的最大屏幕宽度
-
availLeft 表示当前可占用空间离桌面左边的距离
-
availTop 表示当前可占用空间离桌面上面的距离
console.log(screen);
console.log(screen.width);//获取屏幕宽度
console.log(screen.height);//获取屏幕高度
console.log(screen.availHeight);//可占用的最大高度
console.log(screen.availWidth);//可占用的最大宽度
console.log(screen.availLeft);//表示当前可占用空间离桌面左边的距离
console.log(screen.availTop);//表示当前可占用空间离桌面上面的距离Navigator 导航对象
概述：它主要是用于获取用户浏览器及系统相关的设置以及内容
属性
-
userAgent表示当前用户的系统信息以及对应的浏览器信息
//用户相关的系统信息及对应的浏览器信息
console.log(navigator.userAgent);学习BOM核心，就是为了学习后面的路由（路由的底层是BOM）
路由（扩展）
路由的核心就是分发，将对应的内容分发对应的路由地址。
前端路由（渲染）
根据对应的路由地址来渲染不同的页面
前端路由分类
页面路由（会进行页面的跳转 页面会刷新）
location.href = 'http://www.baidu.com'
location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')hash路由（根据对应的hash值来渲染对应的页面 不会进行页面的刷新）
//hash值的改变
window.onhashchange = function(){
console.log('hash值变化了')
document.write(location.hash)
}history路由（根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作）
-
需要对应的pushState调用或者replaceState调用
-
在改变了对应的state值以后 调用对应的forward方法或者是back方法或者是go方法
//其实他的内核还是根据对应的地址的变化 而渲染不一样的内容
window.onpopstate = function(){
console.log('路由触发了');
}SPA 单页面应用程序（只有一个页面）里面常用的路由是hash以及history路由
扩展补充内容
在对应的单页应用程序中我们常用vue和react等框架来进行开发，这就导致了我们对应的vue和react中对应的路由模式常用hash模式以及history模式（默认设置的路由模式都是hash模式，因为效率高）
后端路由（业务）
根据对应的路由地址来处理不同的业务（访问不同的接口）
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
