JavaScript學習之三JavaScript瀏覽器物件模型詳解—-document對象

 

 

       document對象是windows對象的屬性，表示當前瀏覽器中載入的頁面文檔。document對象是BOM和DOM（文件物件模型，後面會詳細講解）共有的對象。

       由於BOM沒有統一的標準，各種瀏覽器的document對象特性並不完全相同，所以在使用document對象的時候需要考慮瀏覽器的相容性，盡量使用各類瀏覽器都支援的屬性。

1. 通用屬性

•   document.bgColor           頁面背景色
•   document.fgColor            頁面的前景色彩
•   document.linkColor  頁面文檔中串連的顏色
•   document.vlinkColor       頁面文檔中訪問過的連結顏色
•   document.alinkColor       頁面文檔中啟用連結的顏色

　　注：以上這五個屬性不建議使用，根據W3C的標準它使用了一些舊特性。

•   document.domain           擷取文檔所在的網域名稱
•   document.referrer            將使用者引入當前頁面的URL
•   document.URL                  當前頁面的URL
•   document.title                  當前頁面的標題
•   document.lastModified   上次修改頁面的時間
•   document.cookie             設定或者擷取Cookie的值

Cookie是在不同頁面之間傳遞參數的方法之一，也是在用戶端儲存資料常用的方法，直接設定document.Cookie屬性即可設定Cookie,Cookie是以普通文本方式儲存的。

格式為若干組索引值對的形式(name=value)的字串，多組索引值對之間用分號(;)分隔。例如：name=老鄧;password=1234；除此之外還可以在Cookie字串上加特殊的屬性。Cookie支援以下屬性：

expires=date： 表示Cookie到期的時間，如果沒設定該屬性，Cookie將在瀏覽器關閉時被刪除；如果expires設定的是一個未來時間，那麼在這個時間之前Cookie均可使用。如果expires設定的是一個過去的時間，那麼Cookie會被立即刪除。

domin=dominName： 表示允許訪問Cookie的安全域，通過設定該屬性可以實現在多個域之間共用Cookie的值。

path=allowPath： 表示允許訪問Cookie的服務端路徑，只有在該路徑下的頁面才可以訪問該Cookie。

secure： 表示該Cookie是安全的，只有在安全域內的網站才能訪問該Cookie。

       使用Cookie時需要注意：Cookie允許儲存的最大長度是4Kb，因此只能在Cookie中儲存少量資料；另外瀏覽器可能會禁用Cookie，所以不見在Cookie中儲存關鍵的參數或資料。下面是兩個常用的Cookie函數：

 1 /***
 2     * 設定Cookie
 3     * @/// <param name="cookieName" type="string">Cookie的名稱</param>
 4     * @/// <param name="cookieValue" type="string">Cookie的值</param>  
 5     * @/// <param name="cookieDay" type="number">Cookie到期天數</param> 
 6 */
 7 function SetCookie(cookieName, cookieValue, cookieDay) {
 8     //當前日期
 9     var today = new Date();
10 
11     //Cookie到期時間
12     var expire = new Date();
13 
14     //如果未設定cookieDay參數或者cookieDay為0，取預設值1
15     if (cookieDay == null || cookieDay == 0) {
16         cookieDay = 1;
17     }
18 
19     //計算Cookie到期時間
20     expire.setTime(today.getTime() + 3600000 * 24 * cookieDay);
21 
22     //設定Cookie的值
23     document.cookie = cookieName + "=" + escape(cookieValue) + ";expire=" + expire.toGMTString();
24 }
25 
26 /***
27     * 讀取指定的Cookie值
28     * @/// <param name="cookieName" type="string">Cookie的名稱</param> 
29 */
30 function readCookie(cookieName){
31     //Cookie字串
32     var cookieString = "" + document.cookie;
33 
34     //找到cookieName的位置
35     var find = cookieString.indexOf(cookieName);
36 
37     //如果找到cookieName，返回Null 字元串
38     if (find == -1 || cookieName == "") {
39         return "";
40     }
41 
42     //確定分號的位置
43     var index = cookieString.indexOf(';', index);
44     if (index == -1) {
45         index = cookieString.length;
46     }
47 
48     //讀取Cookie值
49     return unescape(cookieString.substring(find + cookieName.length + 1, index));
50 }

　　2.　集合屬性　

　　　　document對象具有一些集合類的屬性，通過集合屬性可以擷取當前頁面內所有的同類HTML元素。

屬性	含義
anchors	返迴文檔中所有錨的集合，說明：IE中的document.anchors將返回具有name或者ID屬性的錨，而在firefox中將返回name屬性的錨
applets	返迴文檔中所有applets的集合
embeds	返迴文檔中所有embeds對象的集合
forms	返迴文檔中所有表單的集合
images	返迴文檔中所有img對象的集合
links	返迴文檔中所有連結的集合，即所有設定了href屬性的<a>元素方法

　　3.  方法　

• document.write/document.writeln     在當前文檔中輸出文字，兩者的區別在於writeln會在輸出文字之後附加一個分行符號\n。
• document.open        開啟文檔
• document.close        關閉文檔，同時將寫入的內容輸出到頁面。

　　　　

　　後話：document對象就這些內容，其實也不很複雜的，關鍵是多多練習，做到熟能生巧就OK。下篇我將繼續講解location、screen、navigation、history對象。