8.Bom

bom是什么?

BOM (全称bowser object model) 浏览器对象模型，他是用于操作浏览器相关的内容。BOM是一个缺乏规范的东西，为了保证他的规范性产生了一系列的共用对象来解决这个问题。沿用至今，但是这些共有对象也存在对应的兼容问题，直到w3c的介入（ie 10以后）。他的兼容问题得到了保证。

window的相关属性及方法

window属于浏览器的global对象（顶层对象）。所有的全局函数及全局变量都是属于window的。（window可以被省略）

控制台打印方法

• console.log()  日志打印

• console.error()  错误打印

• console.info()  信息打印

• console.warn()  警告打印

• console.debug()   调试打印

弹窗相关方法

• alert 提示框

• prompt 输入框

• confirm 交互框

窗口打开关闭的方法

• open 打开一个新的窗口
• close 关闭当前窗口

改变窗口大小的方法

• resizeTo  直接改变大小到对应的宽高

• resizeBy 在原本的基础上增加对应的宽高

改变窗口位置的方法

• moveTo  设置对应的位置

• moveBy  在原本的位置上增加对应的距离

改变滚动栏位置的方法

• scrollTo  将对应的滚动栏移到对应的位置
• scrollBy  在原本的基础上进行位置的变化

窗口聚焦和失焦的方法

• window.blur() 失焦

• window.focus() 聚焦

属性

• 获取窗口的父窗口 parent
• innerHeight 获取高度 innerWidth 获取宽度

Document 文档对象

• document对象是属于BOM的组成部分，他里面的一些的相关操作和对应的属性是属于DOM操作，具体的内容在对应的DOM中会提到。

• document表示的是对应的HTML文档，他是用于操作对应HTML文档。

Location 地址栏对象 （*）

属性

• hash 获取#后面的值 *

• search 获取?后面的值 *

• port 端口号

• protocol 协议

• host 主机

• hostname 主机名

• pathname 路径地址

• href 对应的url地址 *

• origin 对应的跨域地址

方法

• reload 重新加载

• assign 指定对应的地址进行跳转（有历史）

• replace 替换当前地址进行跳转 （没有历史）

history 历史对象

history他里面包含了对应的历史页面，他是对于历史页面进行相关操作（页面替换，页面的跳转）

属性

• length属性 （历史页面个数）

• state属性 （状态 存储对应的值） *

• scrollRestoration （滚动栏恢复行为 auto、 manual）

方法

• forward 前进
• back 后退
• go 去任意历史页面（当前页面为0 大于0前进 小于0后退）
• pushState 改变当前的url地址(并不会进行跳转 不会刷新操作)
• replaceState 不会新增新的历史页面 把当前历史页面进行替换

 

pushState和replaceState的区别

• pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 （并非跳转 不会刷新）

• pushState或者replaceState 会给对应的state进行赋值

• pushState 会新增对应新的历史页面 replaceState 不会新增（他会替换当前历史页面）