BOM是browser object model的縮寫,簡稱瀏覽器對象模型。先看看下面這張圖
window對象是BOM的頂層(核心)對象,所有對象都是通過它延伸出來的,也可以稱為window的子對象。
通過圖可以看出 平時經常用到的一些對象都是BOM對象。
下面將一一為您介紹 這些子對象的用途。
一 window對象
window對象除了是BOM中所有對象的父對象外,還包含一些窗口控制函數。
JavaScript中的任何一個全局函數或變量都是window的屬性。如下代碼中的全局變量sTest
1 var sTest="dreamdu"; 2 document.write(sTest==window.sTest);
由于sTest是全局變量,因此可以通過window.sTest訪問這個變量
window函數索引:
1. 窗體控制函數
2. 窗體滾動軸控制函數
3. 窗體焦點控制函數
4. 新建窗體函數
5. 對話框函數
6. 狀態欄屬性
-
- JavaScript window.defaultStatus 屬性
- JavaScript window.status 屬性
7. 時間等待與間隔函數
-
- JavaScript setTimeout() 函數
- JavaScript clearTimeout() 函數
- JavaScript setInterval() 函數
- JavaScript clearInterval() 函數
二 document對象
document對象是window對象的屬性,document對象包含一個節點對象,此對象包含每個單獨頁面的所有HTML元素,這就是W3C的DOM對象。
document屬性
-
- cookie -- 用戶cookie
- title -- 當前頁面title標簽中定義的文字
- URL -- 當前頁面的URL
由于document代表HTML文檔的內容,因此可以通過它表示文檔中加載的一些元素,這些元素全部通過集合訪問。
-
- anchors -- 文檔中所有錨(a name="aname")的集合
- applets -- 文檔中所有applet標簽表示的內容的集合
- embeds -- 文檔中所有embed標簽表示的內容的集合
- forms -- 文檔中所有form標簽表示的內容的集合
- images -- 文檔中所有image標簽表示的內容的集合
- links -- 文檔中所有a(鏈接)標簽表示的內容的集合
document函數
-
- JavaScript write() 在文檔中寫入字符串
- JavaScript writeln() 函數
- JavaScript document.open() 打開已經載入的文檔。代碼示例
1 var win = window.open("about:blank","dreamdu"); 2 win.document.open(); 3 win.document.write("welcome to dreamdu!"); 4 win.document.close();
上面這個示例首先新建一個空白文檔,并打開open,寫入內容,最后完成顯示關閉文檔close。
- JavaScript document.close() 函數
三 frames對象
frames用于表現HTML頁面當前窗體的中的框架集合。
如果頁面使用框架,將產生一個框架集合frames,在集合中可用數字(從0開始,從左到右,逐行索引)或名字索引框架
<iframe id="color_iframe" src="" frameborder="0" scrolling="no" style="text-align: center;"></iframe>
如上代碼可以選擇一個框架 var iframeDocument = window.frames["color_iframe"].contentWindow.document;
四 history對象
瀏覽者通常可以使用瀏覽器的前進與后退按鈕訪問曾經瀏覽過的頁面。JavaScript的history對象記錄了用戶曾經瀏覽過的頁面,并可以實現瀏覽器前進與后退相似的導航功能
可以通過back函數后退一個頁面,forward函數前進一個頁面,或者使用go函數任意后退或前進頁面,還可以通過length屬性查看history對象中存儲的頁面數
由于安全的原因,不能顯示history對象中的歷史頁面URL
history對象函數
-
- JavaScript history.go() 函數 -- 前進或后退指定的頁面數
- JavaScript history.back() 函數 -- 后退一頁
- JavaScript history.forward() 函數 -- 前進一頁
五 location對象
location用于獲取或設置窗體的URL,并且可以用于解析URL,是BOM中最重要的對象之一。location的8個屬性都是可讀寫的,但是只有href與hash的寫才有意義。例如改變location.href會重新定位到一個URL,而修改location.hash會跳到當前頁面中的anchor(<a id="name">或者<div id="id">等)名字的標記(如果有),而且頁面不會被重新加載。
location對象屬性圖示
location屬性
-
- JavaScript hash 屬性 -- 返回URL中#符號后面的內容
- JavaScript host 屬性 -- 返回域名
- JavaScript hostname 屬性 -- 返回主域名
- JavaScript href 屬性 -- 返回當前文檔的完整URL或設置當前文檔的URL
- JavaScript pathname 屬性 -- 返回URL中域名后的部分
- JavaScript port 屬性 -- 返回URL中的端口
- JavaScript protocol 屬性 -- 返回URL中的協議
- JavaScript search 屬性 -- 返回URL中的查詢字符串
- JavaScript assign() 函數 -- 設置當前文檔的URL
- JavaScript replace() 函數 -- 設置當前文檔的URL,并在history對象的地址列表中刪除這個URL
- JavaScript reload() 函數 -- 重新載入當前文檔(從server服務器端)
- JavaScript toString() 函數 -- 返回location對象href屬性當前的值
六 navigator對象
navigator對象通常用于檢測瀏覽器與操作系統的版本。navigator中最重要的是userAgent屬性,返回包含瀏覽器版本等信息的字符串,其次cookieEnabled也很重要,使用它可以判斷用戶瀏覽器是否開啟cookie。
常用的navigator屬性
-
- appCodeName -- 瀏覽器代碼名的字符串表示
- appName -- 官方瀏覽器名的字符串表示
- appVersion -- 瀏覽器版本信息的字符串表示
- cookieEnabled -- 如果啟用cookie返回true,否則返回false
- javaEnabled -- 如果啟用java返回true,否則返回false
- platform -- 瀏覽器所在計算機平臺的字符串表示
- plugins -- 安裝在瀏覽器中的插件數組
- taintEnabled -- 如果啟用了數據污點返回true,否則返回false
- userAgent -- 用戶代理頭的字符串表示
七 screen對象
screen對象用于獲取用戶的屏幕信息。
screen對象屬性
-
- JavaScript availHeight 屬性 -- 窗口可以使用的屏幕高度,單位像素
- JavaScript availWidth 屬性 -- 窗口可以使用的屏幕寬度,單位像素
- JavaScript colorDepth 屬性 -- 用戶瀏覽器表示的顏色位數,通常為32位(每像素的位數)
- JavaScript pixelDepth 屬性 -- 用戶瀏覽器表示的顏色位數,通常為32位(每像素的位數)(IE不支持此屬性)
- JavaScript height 屬性 -- 屏幕的高度,單位像素
- JavaScript width 屬性 -- 屏幕的寬度,單位像素
availWidth與availHeight屬性非常有用,例如:可以使用下面的代碼填充用戶的屏幕:
1 window.moveTo(0,0);
2 window.resizeTo(screen.availWidth, screen.availHeight);
文章列表