前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）

转载自 SegmentFault

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前面我们已经基本掌握常规的语法语义，以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

上一节，我们聊了聊 DOM对象。这节我们来了解一下 BOM对象（浏览器对象）。 BOM对象其实就是我们的 window对象

我们要讲什么？

• BOM对象是什么？

• BOM对象上的属性

BOM对象是什么？

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

BOM对象上的属性

document

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

console

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

• 低版本IE米有

• 打印的对象，会造成内存泄露。线上尽可能不使用。

history

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

length 表示当前历史记录个数

back() 后退

forward() 前进

go() 0 1 -1 等参数。

location

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

href 获取或者设置，网页的url

reload() true为放弃缓存刷新，默认为普通属性

replace() 替换，不会再history留下记录

assign() 等价于直接设置href

navigator

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

screen

返回客户端屏幕参数。

frames

页面中其他 iframe 的引用

其他常用

• devicePixelRatio 返回当前显示器的物理像素和设备独立像素的比例。

• fullScreen 表示窗口是否以全屏显示。

• localStorage&sessionStorage 本地存储

• opener 返回对打开当前窗口的那个窗口的引用（open打开页面）

• performance 检测网页加载速度

微信公众号：前端linong

初级阶段文章目录

• 前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）

• 前端培训-初级阶段（13） - 正则表达式

• 前端培训-初级阶段（13） - 类、模块、继承

• 前端培训-初级阶段（13） - ECMAScript （内置对象、函数）

• 前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）

• 前端培训-初级阶段（13、18）

• 前端培训-初级阶段（9 -12）

• 前端培训-初级阶段（5 - 8）

• 前端培训-初级阶段（1 - 4）

中级阶段文章目录

• 前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）

• 前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）

原文：SegmentFault