淺談JavaScript的bom簡介與組成

BOM的簡介

概念：BOM（Browser Object Document）即瀏覽器對象模型

關于BOM的說明：

(1)BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象

(2)由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window對象

(3)BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性

(4)BOM缺乏一個統一的標準

javaScript語法的標準化組織是ECMA

DOM的標準化組織是W3C [所有瀏覽器公共遵守的標準]

BOM是各個瀏覽器廠商根據dom在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]

ps：通常情況下如果提到了bom，一般指的都是window對象

BOM和DOM的關系

可以認為window相當于瀏覽器窗口 ?而dom則是窗口中的一個頁面

(1)DOM通過document對象來訪問、控制、修改html和xhtml等文檔中的內容

(2)BOM通過 ?window ?對象來訪問、控制、修改瀏覽器中的內容

聯系：BOM包含DOM。

瀏覽器提供用來訪問的是BOM對象

從BOM對象可以訪問到DOM對象

從而使javaScript可以操作瀏覽器、并通過操作瀏覽器讀取到文檔的內容

區別：

DOM描述了處理網頁內容的方法和接口，即操作頁面內部

BOM描述了與瀏覽器進行交互的方法和接口，即操作頁面之間

Bom組成

Window：窗口對象

Navigator：瀏覽器對象

Screen：顯示器屏幕對象

History：歷史記錄對象

Location：地址欄對象

下面讓我來一一介紹這幾個bom對象：

Window：窗口對象

一. 創建

window對象表示瀏覽器窗口，所有瀏覽器都支持它，并且所有的JavaScript全局對象，函數以及變量均自動成為該對象的成員。全局變量是window的屬性，全局函數則是該對象的方法。

二. 方法

1.與彈出框有關的方法：

alert() ? ?顯示帶有一段消息和一個確認按鈕的警告框。

confirm() ? ?顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。

* 如果用戶點擊確定按鈕，則方法返回true

* 如果用戶點擊取消按鈕，則方法返回false

prompt() ? ?顯示可提示用戶輸入的對話框。

* 返回值：獲取用戶輸入的值

2.與打開關閉有關的方法：

close() ? ?關閉瀏覽器窗口。

* 誰調用我 ，我關誰

open() ? ?打開一個新的瀏覽器窗口

* 返回新的Window對象

3. 與定時器有關的方式

setTimeout() ? ?在指定的毫秒數后調用函數或計算表達式。

* 參數：

1. js代碼或者方法對象

2. 毫秒值

* 返回值：唯一標識，用于取消定時器

clearTimeout() ? ?取消由 setTimeout() 方法設置的 timeout。

setInterval() ? ?按照指定的周期（以毫秒計）來調用函數或計算表達式。

clearInterval() ? ?取消由 setInterval() 設置的 timeout。

這里針對定時器做一個小案例，案例div移動（從左向右移動）

var timer=null; var marginLeft=0; function begin(){ clearInterval(timer) timer=setInterval(function(){ marginLeft+=30 var div_style=document.getElementsByTagName("div")[0].style div_style.marginLeft=marginLeft+"px" },300) } function end(){ clearInterval(timer) }

三. 屬性：

1. 獲取其他BOM對象：

history

location

Navigator

Screen:

2. 獲取DOM對象

document

Navigator：

window.navigator對象包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操作系統上非常有用。（這個對象和event一樣是一個全局變量，并且是唯一的） ? ?? ? ? navigator.appCodeName ? ?//瀏覽器代碼名的字符串表示

navigator.appName ? ? ? ? //官方瀏覽器名的字符串表示

navigator.appVersion ? ? //瀏覽器版本信息的字符串表示

navigator.cookieEnabled ? ? //如果啟用cookie返回true，否則返回false

navigator.javaEnabled() ? ? //如果啟用java返回true，否則返回false

navigator.platform ? ? ? ? //瀏覽器所在計算機平臺的字符串表示

navigator.plugins ? ? ? ? //安裝在瀏覽器中的插件數組

navigator.userAgent ? ? ? ? //返回和瀏覽器內核相關的信息

ps:如果window.navigator.userAgent出現了Mobile，可以確定用戶使用的是移動設備

Location：地址欄對象

1. 創建(獲取)：

1). window.location

2). location

2. 方法：

reload() ? ?重新加載當前文檔。刷新

3. 屬性

href ? ?設置或返回完整的 URL。

這里通過地址欄對象和上面的定時器，做一個個5秒后跳轉華為云官網的效果

second=5 function go(){ second-- if(second<0){ clearInterval(timer) location.; } var time=document.getElementById("time") time.innerHTML=second+""; }

History：歷史記錄對象

1. 創建(獲取)：

1）window.history

2） history

2. 方法：

* back() ? ?加載 history 列表中的前一個 URL。

* forward() ? ?加載 history 列表中的下一個 URL。

* go(參數) ? ?加載 history 列表中的某個具體頁面。

* 參數：

* 正數：前進幾個歷史記錄

* 負數：后退幾個歷史記錄

3. 屬性：

* length ? ?返回當前窗口歷史列表中的 URL 數量。

關于js的bom簡介和組成就說到這里了，如有不足之處，歡迎指正！

感恩能與大家在華為云遇見！希望能與大家一起在華為云社區共同成長。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。