概述：
BOM（bowser object model）用于操作浏览器的相关内容。BOM缺乏规范，所以通过产生一系列的共用对象来解决这个问题。尽管这些共用的对象也存在对应的兼容问题，w3c介入后兼容问题得到了保证。
BOM的共有对象及相关的结构
window窗口：
1.Document（文档对象）
2.location（地址栏对象）
3.history（历史对象）
4.screen（屏幕对象）
5.Navigator（导航对象）
6.Frames（子窗口实际也是一个window）
window的相关属性及方法
概述：window属于浏览器的global对象（顶层对象）。所有的全局函数及全局变量都是属于window
的。（window可以被省略）
方法
控制台打印方法
console.log()
console.error()
console.info()
console.warn()
console.debug()
//window的控制台打印方法
// window.console 表示浏览器的控制台
window.console.log('日志打印') //log表示日志
console.error('错误打印') //错误打印
console.info('信息打印') //信息打印
console.warn('警告打印') //警告
console.debug('调试打印') //调试
弹窗相关方法
alert 提示框 alert（‘’）
prompt 输入框 prompt（‘’）
confirm 交互框 confirm（‘’）/交互框 返回一个true 确定 或者false 取消
窗口打开关闭的方法
open 打开一个新的窗口
close 关闭当前窗口
改变窗口大小的方法
resizeTo
resizeBy
改变窗口位置的方法
moveTo
moveBy
//打开窗口的url路径（url） 对应的打开方式（target） 对应的打开窗口的相关设置 （option）
// 第二个参数
// _self表示本页打开
// _blank表示新的页
// window.open() 不传参会打开一个无标题页面
// 传参 第三个参数的相关设置
// fullscreen 是否最大化打开。仅IE有效。
// height
// width
// top
// left
// location 是否显示地址栏
// scrollbars 内容在视口中显示不下，是否允许滚动
// status 是否显示状态栏
// toolbar 是否现在工具栏
// menubar 是否显示菜单栏
// resizable 是否可以通过拖拽浏览器边框改变窗口大小
window.open('http://www.baidu.com','_blank',"width=420,height=230,resizable,scro
llbars=yes,status=1")
//关闭当前窗口
window.close()
//直接改变大小到对应的宽高 w 100 h 100
window.resizeTo(100,100)
//在原本的基础上增加对应的宽高 w 300 h 300
window.resizeBy(200,200)
//设置对应的位置 X 200 Y 2O0
window.moveTo(200,200)
//在原本的位置上增加对应的距离 X 300 Y 300
window.moveBy(100,100)
改变滚动栏位置的方法
scrollTo
scrollBy
打印方法
print
查找方法
find
窗口聚焦和失焦的方法
window.blur() 失焦
window.focus() 聚焦
属性
获取窗口的父窗口 parent
innerHeight 获取高度 innerWidth 获取宽度
//改变滚动栏位置的方法
//回到顶部 将对应的y变为0
//将对应的滚动栏移到对应的位置
window.scrollTo(500,500)
//在原本的基础上进行位置的变化
window.scrollBy(100,100)
//打印方法 print 调用打印机
window.print()
//查找方法
window.find()
//失去焦点
window.blur()
//聚焦
window.focus()
window.parent //得到对应的父窗口
//获取窗口的大小 获取宽高 对应的白色部分
console.log(window.innerHeight)
console.log(window.innerWidth)
Document文档对象
document 是BOM的组成部分，它里面的一些相关操作和对应的属性是属于DOM操作
document表示的是对应的HTML文档，他是用于操作对应HTML文档。
Location 地址栏对象 （*）
属性
hash 获取#后面的值 *
search 获取?后面的值 *
port 端口号
protocol 协议
host 主机
hostname 主机名
pathname 路径地址
href 对应的url地址 *
origin 对应的跨域地址
方法
reload 重新加载
//相关的属性
// 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/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: "/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);
//一般在书写对应的地址的时候 我们一般是不会共有#和? 如果需要共有先写?后面再接#
//相关的方法
// reload 重新加载 刷新
// location.reload()
//里面可以传递一个boolean类型的值 true 表示从服务器重新加载（慢） false 从本地缓存中加载
（快）
location.reload(false)
assign 指定对应的地址进行跳转（有历史）
replace 替换当前地址进行跳转 （没有历史）
对应的href进行赋值也可以跳转
history 历史对象 （*）
概述：history他里面包含了对应的历史页面，他是对于历史页面进行相关操作（页面替换，页面的跳
转）
属性
length属性 （历史页面个数）
state属性 （状态 存储对应的值） *
scrollRestoration （滚动栏恢复行为 auto、 manual）
方法
forward 前进
back 后退
go 去任意历史页面（当前页面为0 大于0前进 小于0后退）
pushState
//指定跳转对应的地址 有历史记录
location.assign('http://www.weibo.com')
// replace 替换当前的地址跳转到对应的地址 没有历史记录
location.replace('http://www.jd.com')
console.log(history.length);//历史页面个数
console.log(history.state);//state状态 他里面可以存储对应的数据 默认请求为null
console.log(history.scrollRestoration);//滚动的位置恢复行为 默认为auto keep-alive的底
层实现之一
// auto
// 将恢复用户已滚动到的页面上的位置。
// manual
// 未还原页上的位置。用户必须手动滚动到该位置。
history.forward()//前进
history.back()//后退
history.go(-1)//去任意历史页面 传递值一定为整数 当前页面的值为0 比0大就是前进 比0就后退
replaceState
pushState和replaceState的区别
pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 （并非跳转 不会刷
新）
pushState或者replaceState 会给对应的state进行赋值
pushState 会新增对应新的历史页面 replaceState 不会新增（他会替换当前历史页面）
Screen 屏幕对象
属性
width 屏幕的宽度
height 屏幕高度
availHeight 可占用的最大屏幕高度
availWidth 可占用的最大屏幕宽度
availLeft 可占用的空间离桌面的左边距离
availTop 可占用的空间离桌面的上边距离
Navigator 导航对象
概述：他主要是用于获取用户浏览器及系统相关的设置以及内容
属性
userAgent 表示当前用户的系统信息以及对应的浏览器信息
//改变当前的url地址(并不会进行跳转 不会刷新操作) state的值（可以是任意类型的数据） 名字（建议
空值） url地址
history.pushState('hello','','./history讲解.html') //会产生跨域
//pushState 如果传入对应的url 他会改变对应的url地址 （并非跳转）
//pushState 会新增对应的历史页面
//pushState 会给对应的state进行赋值
history.replaceState('您好','','./history讲解.html')
//replaceState 不会新增新的历史页面 把当前历史页面进行替换
//replaceState 也会改变对应的url地址 也不会进行跳转（刷新）
//replaceState 也会改变对应的state的值
console.log(history.length);
console.log(history.state);
console.log(screen.width);//获取屏幕宽度
console.log(screen.height);//获取屏幕的高度
console.log(screen.availHeight);//可占用的最大高度
console.log(screen.availWidth);//可占用的最大宽度
console.log(screen.availLeft);//表示当前可占用空间离左边的距离
console.log(screen.availTop);//表示当前可占用空间离上面的距离
//用户相关的系统信息及对应的浏览器信息
console.log(navigator.userAgent);