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

h9911 發(fā)布于2019-08-23 18:15 / 539人閱讀

摘要：提供了與瀏覽器窗口進行交互的對象標簽之間不會共享。用于描述當前瀏覽器的歷史記錄。表示窗口是否以全屏顯示。

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

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

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

我們要講什么？

BOM對象是什么？

BOM對象上的屬性

BOM對象是什么？

BOM（Browser Object Model）中文瀏覽器對象模型。
表示一個包含 DOM文檔的窗口。提供了與瀏覽器窗口進行交互的對象
標簽之間不會共享。
window 對象既是ECMAScript規(guī)范中的Global對象，也是BOM中的頂級對象；

BOM對象上的屬性 document

指向窗口中載入的 DOM文檔（document.defaultView 屬性可以獲取指定文檔所在窗口。）

console

提供了對瀏覽器調試控制臺的訪問。

低版本IE米有

打印的對象，會造成內存泄露。線上盡可能不使用。

history

history對象的引用。用于描述當前瀏覽器的歷史記錄。
只提供了有限的 api。不提供訪問，修改等操作。

length 表示當前歷史記錄個數(shù)

back() 后退

forward() 前進

go() 0 1 -1 等參數(shù)。

location

當前加載頁面的url、端口、協(xié)議等信息。還可以對當前的窗口進行導航。

href 獲取或者設置，網(wǎng)頁的url

reload() true為放棄緩存刷新，默認為普通屬性

replace() 替換，不會再history留下記錄

assign() 等價于直接設置href

navigator

返回當前瀏覽器相關信息。包括瀏覽器的名稱、版本、語言、系統(tǒng)平臺、用戶特性字符串等信息。

screen

返回客戶端屏幕參數(shù)。

frames

頁面中其他 iframe 的引用

其他常用

devicePixelRatio
返回當前顯示器的物理像素和設備獨立像素的比例。

fullScreen
表示窗口是否以全屏顯示。

localStorage&sessionStorage
本地存儲

opener
返回對打開當前窗口的那個窗口的引用（open打開頁面）

performance
檢測網(wǎng)頁加載速度

微信公眾號：前端linong

初級階段文章目錄

前端培訓-初級階段（17） - 數(shù)據(jù)存儲（cookie、session、stroage）

前端培訓-初級階段（13） - 正則表達式

前端培訓-初級階段（13） - 類、模塊、繼承

前端培訓-初級階段（13） - ECMAScript （內置對象、函數(shù)）

前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）

前端培訓-初級階段（13、18）

前端培訓-初級階段（9 -12）

前端培訓-初級階段（5 - 8）

前端培訓-初級階段（1 - 4）

中級階段文章目錄

前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）

前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）

GPU云服務器云服務器中級前端工程師對象模型與數(shù)據(jù)模型獨立開發(fā)變現(xiàn)周刊（第26期）：短鏈瀏覽器對象模型

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/104931.html

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

摘要：提供了與瀏覽器窗口進行交互的對象標簽之間不會共享。用于描述當前瀏覽器的歷史記錄。表示窗口是否以全屏顯示。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。前面我們已經(jīng)基本掌握常規(guī)的語法語義，以及基...

smallStone 2019-08-02 15:22 評論0 收藏0
前端培訓-中級階段（11、12）- 跨域請求原理以及實現(xiàn)（2019-08-22期）

摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當這些從的腳本執(zhí)行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...

binaryTree 2019-08-26 10:21 評論0 收藏0
前端培訓-中級階段（10）- 同源策略（2019-08-15期）

摘要：同源策略是什么同源策略是瀏覽器的一個安全功能，不同源的數(shù)據(jù)禁止訪問。或許你可以說驗證，在瀏覽器沒有同源策略的情況下這些都可以繞過去?？偨Y同源策略是蠻好的，防御了大部分的攻擊。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思...

heartFollower 2019-08-26 10:12 評論0 收藏0
前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS）...

sutaking 2019-08-23 18:26 評論0 收藏0
前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS）...

Airy 2019-08-02 15:25 評論0 收藏0