前端中级阶段学习（3） BOM 浏览器对象模型

我们要讲什么？

1. BOM对象是什么？
2. BOM对象上的属性

BOM对象是什么？

BOM（Browser Object Model）中文浏览器对象模型。
表示一个包含 DOM文档的窗口。提供了与浏览器窗口进行交互的对象
标签之间不会共享。
window 对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；

BOM对象上的属性

document

指向窗口中载入的 DOM文档（document.defaultView 属性可以获取指定文档所在窗口。）

console

提供了对浏览器调试控制台的访问。

1. 低版本IE米有
2. 打印的对象，会造成内存泄露。线上尽可能不使用。

history

history对象的引用。用于描述当前浏览器的历史记录。
只提供了有限的 api。不提供访问，修改等操作。

1. length 表示当前历史记录个数
2. back() 后退
3. forward() 前进
4. go() 0 1 -1 等参数。

location

当前加载页面的url、端口、协议等信息。还可以对当前的窗口进行导航。

1. href 获取或者设置，网页的url
2. reload() true为放弃缓存刷新，默认为普通属性
3. replace() 替换，不会再history留下记录
4. assign() 等价于直接设置href

navigator

返回当前浏览器相关信息。包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

screen

返回客户端屏幕参数。

frames

页面中其他 iframe 的引用

其他常用

1. devicePixelRatio
   返回当前显示器的物理像素和设备独立像素的比例。
2. fullScreen
   表示窗口是否以全屏显示。
3. localStorage&sessionStorage
   本地存储
4. opener
   返回对打开当前窗口的那个窗口的引用（open打开页面）
5. performance 
   检测网页加载速度

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

更多文章：

前端HTML & CSS 基础入门（1）初识

前端HTML & CSS 基础入门（2）段落及文本

前端HTML & CSS 基础入门（3）列表及其样式

前端HTML & CSS 基础入门（4）边框与背景

前端HTML & CSS 基础入门（5）超链接

前端HTML & CSS 基础入门（6）表格

前端HTML & CSS 基础入门（7）表单

前端HTML & CSS 基础入门（8）CSS盒子

前端HTML & CSS 基础入门（9）布局与定位