BOM的概述：
Bom 稱為瀏覽器對象模型（bowser object model），也就意味他可以獲取瀏覽器上的所有內(nèi)容以及相關(guān)的操作。BOM缺乏規(guī)范的，存在共有對象來解決這個問題，但是共有對象也存在兼容問題（ie10以后）
BOM的結(jié)構(gòu)：
window
概述： window是頂層對象 屬于golbal對象。他是所有全局變量的父親。
相關(guān)方法
打印方法
// window //對象
console.log(window);//window 對象 Window的構(gòu)造函數(shù)
//常用的彈窗方法及打印方法
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('請輸入你的手機號')//輸入框 他會有個輸入框讓你輸入返回對應(yīng)的你輸入的內(nèi)容 （string的內(nèi)容）
console.log(str);
打開關(guān)閉方法
//打開 open 關(guān)閉 close
// 第一個參數(shù)是url地址 第二個參數(shù)為title target(打開方式 _blank _self _parent) 第三個參數(shù)為設(shè)置的參數(shù)（窗口的高度 寬度等等）
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
// ????height=100 窗??度；
// width=400 窗?寬度；
// top=0 窗?距離屏幕上?的象素值；
// left=0 窗?距離屏幕左側(cè)的象素值；
// toolbar=no 是否顯??具欄，yes為顯?；
// menubar，scrollbars 表?菜單欄和滾動欄。
// resizable=no 是否允許改變窗???，yes為允許；
// location=no 是否顯?地址欄，yes為允許；
// status=no 是否顯?狀態(tài)欄內(nèi)的信息（通常是?件已經(jīng)打開），yes為允許；
window.close()//關(guān)閉當前的窗口 （關(guān)閉瀏覽器只能有一個頁面）
改變位置的方法
//moveBy 一個是x軸的距離 y軸的距離
window.moveBy(100,100)//X+100 Y+100
//moveTo 一個x軸 一個y軸
window.moveTo(200,200)//X=200 Y=200
改變大小的方法
//改變對應(yīng)的窗口大小
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 //回到頂部
相關(guān)屬性
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)//協(xié)議 用于通信 （基于tcp/ip）http（明文傳輸） https（安全）（加密過）
console.log(location.port)//端口號? 1--65525 （1-100的端口電腦占用了）http默認的端口80 https默認端口443
console.log(location.href)//鏈接的地址? 也可以設(shè)置
console.log(location.search);//?后面帶的值 一般是get請求傳輸數(shù)據(jù)的時候 *
console.log(location.origin);//跨域
console.log(location.pathname);//路徑名 獲取的除了協(xié)議和ip地址加端口號后面的東西
方法
assign 跳轉(zhuǎn)頁面
location.assign('http://www.baidu.com')
replace 替換頁面
location.replace('http://www.weibo.com')
reload 重新加載頁面
location.reload()
//參數(shù) boolean類型的值 true（從服務(wù)器加載 慢） false （從緩存中加載 快）
history對象 （*）
屬性
length 歷史頁面?zhèn)€數(shù)
state 狀態(tài)存儲的對象
scrollRestoration 滾動欄恢復(fù)
方法
forwad 前進
functionfn(){
history.forward()//前進
}
back? 后退
functionfn1(){
history.back()//后退
}
go 去任意的歷史頁面
functionfn2(){
history.go(-1)//去任意頁面 0就是自己 小于0 后退 大于0前進
}
pushState
//spa 單頁應(yīng)用
functionfn3(){
//添加state的值 數(shù)據(jù)? ""? 地址(會產(chǎn)生跨域問題)
history.pushState('hello','','./index.html')//會改地址 但是不會刷新 推一個歷史頁面到歷史區(qū) state設(shè)置進去
}
replaceState
functionfn4(){
//替換state
history.replaceState('world','','/location對象講解.html')//會改地址 但是不會刷新 在歷史區(qū)直接修改當前這個歷史頁面 state設(shè)置進去
}
screen 對象
屬性
avaliHeight 可占用的最大高度
avaliWidth 可占用的最大寬度
avaliLeft 離屏幕左側(cè)的距離
avaliTop 離屏幕上方的距離
navigator對象
屬性
userAgent 用戶瀏覽器設(shè)置信息
路由 （擴展）
對應(yīng)的開發(fā)者來說 路由是一個很重要的東西。（前端路由）（后端路由）
后端路由
根據(jù)對應(yīng)的接口地址來訪問不同的功能 （后端路由 restful風格（接口的風格））
前端路由
根據(jù)不同的訪問路徑 （path）來渲染不同的內(nèi)容（組件）
