物件模型的概念(The concept of Object-Model)

JS 是一種以物件為導向的語言程式，所以理所當然的，這個語言就是以物件為中心，那這些物件又為何呢？除了由 JS 本身所提供的內建物件或者是我們所自訂的物件之外，屬於瀏覽器內的相關元件也都是物件，諸如：document(文件)、window(視窗)…等等，另外在網頁中以 <> 所括住的其它標記語言標籤，也都可以將它視之為物件。

我們可以粗淺地這麼說——舉凡能在瀏覽器上使用到的元件，我們都可以將之視為物件。

物件模型層次(The Object-Model Hierarchy)

文件的物件層次其基本的作用是用來提供 Script 在瀏覽器視窗所包含的物件中來引用相關的物件。層次就某個方面來說，它就是路徑，Script 可用它來精確定位或參考某個物件。在 JS 中，文件物件的層次是一種「包含」的層次，而不是「繼承」的層次，也就說沒有一個物件會繼承其高層物件所屬的方法或屬性。

當瀏覽器戴入一張網頁的同時，瀏覽器會依據標記語言文件與其它適當資訊的特定值，來建立一定數量的 JS 物件。而這些物件將會存在於標記語言文件它自身的層次結構中。

每張網頁皆有(至少)以下物件：

  • navigator(瀏覽器)：存放瀏覽器相關資訊與 plug-ins 資訊。
  • window(視窗)：有適用於整個視窗的資訊，框架文件中的每一個子視窗也是視窗物件。
  • document(文件)：包含依據文件內容的資訊，如：背景顏色、鏈結與表單等等。
  • location(位址)：當前網頁位址的資訊。
  • history(瀏覽記錄)：包含先前網頁位址的資訊。

依據它的內容，文件當中也可以包含其它的物件。例如在文件當中的每一個 <form> 標籤都會產生相對應的 form 物件。提到具體物件的定義，您必須指定物件的名稱和它所繼承的所有物件名。通常，在文件中物件的命名是由標記語言標籤所屬的標籤名稱來決定的。

那我們應該要如何使用正確的方式來指定或引用文件當中的目標物件呢？這時我們就要注意一下物件的層次然後再來指定或引用。現在，我們就使用下面較為通俗的例子來說明。

例如在一間「學校」裡頭，有許多間的「教室」，而教室裡有許多位的「學生」。在前述之中我們可以將「學校」當成是一個瀏覽的視窗，「教室」則可以將它視為一張張的網頁，而「學生」可將它當作是網頁中的某個物件。

如果我們要指定或引用某個教室裡的學生「王小明」，這時我們就要注意順序將它完整敘述出，而且須將「各部份之間」用半形句點 . 連接之︰

學校.三年三班.學生.王小明

我們也可以想像「王小明」具有某些特定的技術或方法來做動作：

學校.三年三班.學生.王小明.動作()

然而，這時王小明的動作並沒有完成，其動作的方法需要一個參數來指引它應該怎麼做動作。

學校.三年三班.學生.王小明.動作(起立)

這時，我們所指定的王小明完成了所有應有的動作。

由以上的說明中，我們可發現到，指定物件或引用物件的方式是由大到小或由上到下的，對於這種方式我們可以稱之為「物件的順序層次」，而在網頁之中也是以這種相同的方式來分層次的。假如某個物件的作用域越小，其物件位置的「假設路徑」就越多(因為我們所引用的物件也多)，對客戶端 JS 而言，其作用域最大是不會超過瀏覽器的。

左邊的圖是一個最低公用標準的文件物件層次圖，它可以在所有的瀏覽器當中施行。

例如，當我們想要來指定或者是引用 form 中的 button 物件時，其寫法為：

doucment.form.button

文件物件是如何產生的(How Document Objects Are Born)

當一份標記語言文件被瀏覽器載入後，瀏覽器會在記憶體裡保留由文件中標記語言標記語言的標籤來產生的物件模型，每個文件都有其相應的 window 物件。以下就是一個簡易的示範：

由於瀏覽器載入了該份文件，所以在當前的視窗之中，瀏覽器會在其模型中產生一個 document 物件。

然後我們可以在這份標記語言文件當中添加一個表單元素(也就是 form 標籤對)，然後我們再重新載入這份文件，此時瀏覽器的物件模型中則會產生一個 form 物件，而 form 物件在當前層次中是被包含在 document 物件中。

然後我們在此標記語言文件當中再添加一個文字輸入元素，重新載入該文件後，此時模型中的視窗則會包含一個文件，文件中包含一個表單，表單中則包含一個文字輸入元素。

然後我們在此標記語言文件當中再添加一個按鈕元素，然後重新載入該文件，因為文字輸入元素和按鈕元素是屬於同一層次的，所以在物件模型中的表現則是被包含在表單元素中。

物件的引用(The Object References)

每當一份標記語言文件載入瀏覽器後，該文件中的所有物件均會依據瀏覽器文件物件模型(Document Object Model，DOM)所規定的層次結構來存放這些物件。假如一個腳本(Script)要控制一個物件，就會有一個相對應的方式來指向一個物件，我們讓腳本來指出它所要的是那一個物件，這種方式我們則可稱之為「物件的引用」或「物件的參考」。

對於每個物件的引用，其引用的路徑(層次)必須包括從頂端的層次到目標物件的層次，而在這個路徑中，每個相連物件之間必須使用句號來隔開彼此。

以下就是一個簡易的 JS 物件引用的示範：

因為在每個視窗(或框架)中只能有一個文件，所以我們對於一個文件的引用方式為：

window.document
　
　
　

從上面我們可以瞭解到，我們引用一個層次越低的物件，其引用的路徑(層次)也就會越長。

※因為在正常的情況下每一個視窗它就只能有一份文件，所以我們對於物件的引用上可以省略 window 這個物件，然後直接從 document 開始引用。

屬性、方法與事件處理(Properties、Methods And Event Handlers)

每個物件在某種程度上是唯一的，而我們定義一個物件可以從三方面來探討：它看起來像什麼、它是如何起作用的以及腳本如何控制它，這三方面分別代表了物件的屬性、方法及事件處理。

屬性(Properties)

每個物理上的物件都會有一些定義該物件特徵的集合，例如一支筆有其長度、直徑或者顏色等等的特徵，而我們可以把這些特徵統稱為屬性。每個特徵或多或少都有一個與它相對應的值，例如一支筆的顏色屬性可能是「黑色」、「藍色」或者「紅色」，這些顏色名稱就是一個文字值；而其長度對它而言就可能是一個數值。

例如：我們先前所提到那個王小明的說明：

學校.三年三班.學生.王小明.身高

由此我們就可以知道，屬性是從屬於物件的，所以我們對於一個物件的屬性引用就是「物件引用」之後加一個句點，然後再加上屬性名稱。例如：

document.bgcolor

方法(Methods)

屬性就像是描述物件的形容詞，而方法就像是物件的動詞，方法指的是所有和物件相關的動作。方法是瀏覽器的一些預設程序，例如 open() 、write() …等等。我們在網頁中安插一些 JS 的方法名稱，瀏覽器就會進行這些方法的程序。

讓方法有其作用的行為，我們可以稱之為「方法的引用」。在 JS 中，方法的引用是由一些方法名稱的關鍵字加上括號 () 所組合成的。例如：

document.write()

有時候為了完成一些 Script 的任務，我們必須在過程中加入一些訊息，對於方法所發送或傳遞的訊息或者是讓其有作用的東西，我們可稱之為「參數」。例如：

document.write("嗨～您好。")

上述簡短的範例則會在文件上顯示——嗨～您好。

事件處理(Event Handlers)

所謂事件指的是在文件中的動作。一般而言，通常指的是瀏覽者動作之後的結果，譬如瀏覽者點擊一個按鈕或者是在文字區中輸入一些字元。例如：

<input type="button" value="請按我" onclick="window.alert('嗨～您好。')" />

上面是一個簡單的例子，它在網頁上會產生一個按鈕，按鈕上的文字為「請按我」，onclick 是一個事件，當按下按鈕後則會產生一個對話訊息方塊，其內容訊息為「嗨～您好。」。