在瀏覽器開始支援 JavaScript 時,存在一組物件提供有限的功能,在當時 Netscape Navigator 與 Internet Explorer 大戰的年代,兩個瀏覽器在這組物件上有些交集的部份,這些交集的部份被留存到現在,並在一些主流的瀏覽器中仍有支援。這組物件稱為瀏覽器物件模型(Browser Object Model)或非正式地稱為 Level 0 DOM,因為它在 DOM(Document Object Model)標準化前就已存在,而不是真有有文件規範 Level 0 DOM。
這組物件從全域物件 window
開始,具有以下的特性階層關係:
window|
|navigator
|location
|frames
|screen
|history
|document
|forms
|links
|anchors
|images
|all
|cookie
這些物件在一般 JavaScript 的書中都有介紹,使用上雖然不難,但有些會有跨瀏覽器的問題(以下列的參考鏈結,大致有標出適用哪些瀏覽器),以下僅作每個物件的簡介。
window
物件代表瀏覽器視窗本身,為 Window
的實例,是 JavaScript 以瀏覽器為客戶端時的頂層物件,其中像是 alert
、confirm
、prompt
、setTimeout
、clearTimeout
、setInterval
、clearInterval
等函式,都是以 window
作為名稱空間物件的函式。
window
本身也擁有一些控制視窗的方法,例如 open
、moveTo
、scroll
、scrollTo
等。可以在〈Window Object〉 查詢這些函式或方法的使用方式。
window.navigator
代表了瀏覽器,為 Navigator
的實例,可以從這個物件上取得瀏覽器本身的資訊,通常是為了進行所謂瀏覽器偵測才會使用這個物件,不過這個物件取得的資訊並非完全可靠,因為有的瀏覽器提供有選項或者有工具可變造這些資訊。你可以在〈Navigator Object〉查詢這個物件上有哪些資訊可以取得。
window.location
代表了視窗目前所顯示頁面的 URL,是 Location
的實例,可以從這個物件上取得目前頁面的 URL 相關資訊,也有 reload
與 replace
方法,可以重新載入頁面或取代頁面。可在〈Location Object〉 查詢這個物件的相關內容。也有個 window.document.location
,與 window.location
是同一個物件。
window.frames
是目前視窗中擁有的框架,以類陣列的 HTMLCollection
物件組織這些物件,索引位置是框架在視窗中出現的順序,如果框架有設定 id
或 name
屬性,也可以使用 []
搭配名稱來取得框架,每個取得的框架都是 Window
的實例。在〈安全限制〉 中就有個例子使用了 window.frames
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<iframe id="page" name="page" src="https://openhome.cc"></iframe>
<span id="console"></span>
<script type="text/javascript">
window.onload = function() {
alert(window.frames['page'].document.body.innerHTML);
};
</script>
</body>
</html>
window.screen
物件包括了目前視窗所關聯的螢幕資訊,像是寬、高、顏色深度等,為 Screen
的實例,可以在〈Screen Object〉查詢各個特性。
window.history
則包括了瀏覽器瀏覽歷史,為 History
實例,基於安全與隱私,你無法取得瀏覽歷史,但可以有 back
、forward
、go
等方法,指定前進、後退至哪個歷史頁面,像是回到上一面、下一頁的功能,想使用 JavaScript 控制,就可以用這個物件,可查詢〈History Object〉了解細節。
window.document
為 Document
的實例,代表整份 HTML 文件,這個物件上提供一組群集(Collection)物件,它們都是 HTMLCollection
的實例,這些群集物件都有個特徵,本身可以用 []
搭配索引數字來存取,如果相對應的標籤有 id
或 name
屬性,也可以使用 []
搭配名稱來存取,或是搭配點算子與名稱來存取(先前介紹的 window.frames
也有這種特徵)。
(HTMLCollection
規範的是使用 item
方法搭配索引來取得元素,或使用 namedItem
方法搭配 id
或 name
屬性來取得元素,不過在 JavaScript 實作中,可以且通常使用 []
搭配索引或名稱來取得元素。)
舉個來說,如果有個網頁如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form name="login">
User: <input type="text" name="user" value="guest"><br>
Password: <input type="password" name="passwd" value="guest">
<button type="submit">Submit<button/>
</form>
</body>
</html>
想要取得文件中 name
為 login
的表單,有幾種方式:
document.forms[0] // 文件中第一個表單,索引為 0
document.forms['login']
document.forms.login
forms
、links
、anchors
、images
等,都可以用這種方式來取得。
在透過 document.forms
取得某個表單元素之後,如果想取得其下的子元素,可以使用 elements
來取得,一樣可以使用索引或 name
搭配 []
來取得,也可以透過 .
運算子來取得。例如,想取得 name
為 user
的輸入文字框,可以如下:
document.forms['login'].elements[0] // 表單中第一個元素
document.forms['login'].elements['user']
document.forms['login'].elements.user
表單比較特別,如果你的表單有 name
屬性,而當中的元素也有 name
屬性,則可以有個很方便的存取方式。例如若要取得 login
表單的 user
欄位,則可以如下:
document.login.user
由於輸入欄位有個 value
屬性,所以要取得欄位值就是:
document.login.user.value
只要你取得標籤元素,標籤上的某個屬性,基本上可以在物件上使用相對應的特性來取得,除了一些保留字之外,例如 class
屬性要用 className
特性名稱來取得,因為 class
是保留字,而 <label>
的 for
屬性要用 htmlFor
特性來取得。
超鏈結與錨點都是使用 <a>
來定義,差別在於超鏈結使用 href
屬性,而錨點使用 name
屬性, document.links
與 document.anchors
則分別表示超鏈結與錨點元素。
documents.images
則表示了文件中的所有 <img>
元素。
document.all
代表文件中所有元素,是早期存取文件中所有元素的方式。例如,若文件中某個元素具有 name
屬性值為 'element1'
,則可以透過這種方式來取得:
document.all['element1']
在 DOM 標準化之後,這種寫法的作用已經被 document.getElementsByName
等方法取代了。
document
的 cookie
則允許設定與讀取 cookie
,設定方式是字串,形式為 name=value
,每個 name/value 間以分號區隔,取得的也是字串,你必須自行剖析 name/value 對。可以參考〈Cookie〉稍微了解一下 Cookie 的原理。
基於安全性,被標示了 HttpOnly
屬性的 Cookie,無法使用 JavaScript 來讀取。