前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

前面我們已經基本掌握常規的語法語義，以及基本的使用方法。接下來我們講深入進去了解其中內在的原理。

上一節，我們聊了聊 DOM對象。這節我們來了解一下 BOM對象（瀏覽器對象）。
BOM對象其實就是我們的 window對象

我們要講什麼？

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
   檢測網頁加載速度

微信公衆號：前端linong

初級階段文章目錄

1. 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
2. 前端培訓-初級階段（13） - 正則表達式
3. 前端培訓-初級階段（13） - 類、模塊、繼承
4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
5. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
6. 前端培訓-初級階段（13、18）
7. 前端培訓-初級階段（9 -12）
8. 前端培訓-初級階段（5 - 8）
9. 前端培訓-初級階段（1 - 4）

中級階段文章目錄

1. 前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
2. 前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）