Level 0 DOM 簡介

在瀏覽器開始支援JavaScript時，存在一組物件提供有限的功能，在當時Netscape Navigator與Internet Explorer大戰的年代，兩個瀏覽器在這組物件上有些交集的部份，這些交集的部份被留存到現在，並在一些主流的瀏覽器中仍有支援。這組物件稱為瀏覽器物件模型（Browser Object Model）或非正式地稱為Level 0 DOM，因為它在DOM（Document Object Model）標準化前就已存在，而不是真有有文件規範Level 0 DOM。

這組物件從全域物件window開始，具有以下的特性階層關係：

這些物件在一般JavaScript的書中都有介紹，使用上雖然不難，但有些會有跨瀏覽器的問題（以下列的參考鏈結，大致有標出適用哪些瀏覽器），以下僅作每個物件的簡介。

window物件代表瀏覽器視窗本身，為Window的實例，是JavaScript以瀏覽器為客戶端時的頂層物件，其中像是alert()、confirm()、prompt()、setTimeout()、clearTimeout()、setInterval()、clearInterval()等函式，都是以window作為名稱空間物件的函式，window本身也擁有一些控制視窗的方法，例如open()、moveTo()、scroll()、scrollTo()等。你可以在 Window 查詢這些函式或方法的使用方式。

window.navigator代表了瀏覽器，為Navigator的實例，你可以從這個物件上取得瀏覽器本身的資訊，通常是為了進行所謂瀏覽器偵測才會使用這個物件，不過這個物件所取得的資訊並非完全可靠，因為有的瀏覽器提供有選項或者有工具可變造這些資訊。你可以在 Navigator 查詢這個物件上有哪些資訊可以取得。

window.location代表了視窗目前所顯示頁面的URL，是Location的實例，你可以從這個物件上取得目前頁面的URL相關資訊，也有reload()與replace()方法，可以重新載入頁面或取代頁面。可在 Location 查詢這個物件的相關內容。也有個window.document.location，與window.location是同一個物件。

window.frames是目前視窗中擁有的框架，以類似陣列的HTMLCollection物件組織這些物件，索引位置是框架在視窗中出現的順序，如果框架有設定id或name屬性，也可以使用[]搭配名稱來取得框架，每個取得的框架都是Window的實例。在安全限制中有個例子：

<html>
    <head>
        <script type="text/javascript">
            window.onload = function() {
                alert(window.frames['page'].document.body.innerHTML);
            };
        </script>
    </head>
    <body>
        <iframe id="page" name="page"
                src="https://openhome.cc"></iframe>
    </body>
</html>

window.screen物件包括了目前視窗所關聯的螢幕資訊，像是寬、高、顏色深度等，為Screen的實例，可以在 Screen 查詢各個特性。

window.history則包括了瀏覽器瀏覽歷史，為History實例，基於安全與隱私，你無法取得瀏覽歷史，但可以有back()、forward()、go()等方法，指定前進、後退至哪個歷史頁面，像是回到上一面、下一頁的功能，想使用JavaScript控制，就可以用這個物件，可查詢 History 了解細節。

window.document為Document的實例，代表整份HTML文件，這個物件上提供一組群集（Collection）物件，它們都是 HTMLCollection 的實例，這些群集物件都有個特徵，本身可以用[]搭配索引數字來存取，如果相對應的標籤有id或name屬性，也可以使用[]搭配名稱來存取，或是搭配點算子與名稱來存取（先前介紹的window.frames也有這種特徵）。

（HTMLCollection規範的是使用item()方法搭配索引來取得元素，或使用namedItem()方法搭配id或name屬性來取得元素，不過在JavaScript實作中，可以且通常使用[]搭配索引或名稱來取得元素。）

舉個來說，如果有個網頁如下：

<html>
    <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 稍微了解。