BOM的概述：

Bom 称为浏览器对象模型（bowser object model），也就意味他可以获取浏览器上的所有内容以及相关的操作。BOM缺乏规范的，存在共有对象来解决这个问题，但是共有对象也存在兼容问题（ie10以后）

BOM的结构：

window

概述： window是顶层对象 属于golbal对象。他是所有全局变量的父亲。

相关方法

打印方法

// 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

改变大小的方法

//改变对应的窗口大小

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 //回到顶部

相关属性

innerHeight 和 innerWidth

parent

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地址加端口号后面的东西

方法

assign 跳转页面

location.assign('http://www.baidu.com')

replace 替换页面

location.replace('http://www.weibo.com')

reload 重新加载页面

location.reload()

//参数 boolean类型的值 true（从服务器加载 慢） false （从缓存中加载 快）

history对象 （*）

属性

length 历史页面个数

state 状态存储的对象

scrollRestoration 滚动栏恢复

方法

forwad 前进

functionfn(){

history.forward()//前进

}

back  后退

functionfn1(){

history.back()//后退

}

go 去任意的历史页面

functionfn2(){

history.go(-1)//去任意页面 0就是自己 小于0 后退 大于0前进

}

pushState

//spa 单页应用

functionfn3(){

//添加state的值 数据  ""  地址(会产生跨域问题)

history.pushState('hello','','./index.html')//会改地址 但是不会刷新 推一个历史页面到历史区 state设置进去

}

replaceState

functionfn4(){

//替换state

history.replaceState('world','','/location对象讲解.html')//会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去

}

screen 对象

属性

avaliHeight 可占用的最大高度

avaliWidth 可占用的最大宽度

avaliLeft 离屏幕左侧的距离

avaliTop 离屏幕上方的距离

navigator对象

属性

userAgent 用户浏览器设置信息

路由 （扩展）

对应的开发者来说 路由是一个很重要的东西。（前端路由）（后端路由）

后端路由

根据对应的接口地址来访问不同的功能 （后端路由 restful风格（接口的风格））

前端路由

根据不同的访问路径 （path）来渲染不同的内容（组件）