第六章文件物件模型 DOM 張智星 jang mirlab org http mirlab

第六章文件物件模型（ DOM）張智星 jang@mirlab. org http: //mirlab. org/jang 台大資系多媒體檢索實驗室

Java. Script 程式設計與應用：用於網頁用戶端本章大綱 n n 本章介紹文件物件模型(Document Object Models，簡稱 DOM)，這是動態網頁的基礎，只要瞭解 DOM 的原理，以及相關物件的性質及方法，我們就可以設計出具有高互動性的動態網頁。主題 n n 6 -1：DOM 的性質 6 -2：DOM 的方法 2 /30

Java. Script 程式設計與應用：用於網頁用戶端 6 -1：DOM 的性質 n 本小節介紹DOM的概念，以及Java. Script內建物件的屬性。 3 /30

Java. Script 程式設計與應用：用於網頁用戶端 DOM的簡介 n n n 當瀏覽器讀入一頁網頁時，就會根據此網頁的內容來建立相關的文件物件模型（Document Object Model，簡稱 DOM）。 DOM是一個階層式的物件模型，包含了網頁的各種物件，我們需要瞭解這些物件的性質和方法，才能產生具有互動性的網頁。這些物件的定義是根據 WWW Consortium 所的標準來制訂，相關細節可以參考其網站： http: //www. w 3 c. org。 4 /30

Java. Script 程式設計與應用：用於網頁用戶端物件之間的關係(1) 5 /30

Java. Script 程式設計與應用：用於網頁用戶端物件之間的關係(2) n 說明 n n n 由圖可以看出，window 物件是所有物件的始祖。每個物件的分支多寡，就可以大概看出此物件的重要性。這些物件各有不同的性質 (Properties) 及方法 (Methods)，Java. Script 可利用這些性質及方法來建立網頁的互動性。 6 /30

Java. Script 程式設計與應用：用於網頁用戶端存取物件的性質 n 我們必須知道如何取得物件的性質，並進而改變這些性質，才能產生動態網頁。欲存取物件的性質，有三種方法： n n n 用屬性名稱來存取物件的屬性(這是最常用到的方法) 例如：物件名稱. 屬性名稱用性質名稱來存取物件的性質(此種方法同等於前一種方法，其好處是：可將性質名稱以字串變數傳入) 例如：物件名稱[“屬性名稱”] 用索引來存取物件的性質(比較少用) 例如：物件名稱[index] 7 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -1 n 主題：展示window 物件的幾個基本性質 n n n 連結：win. Prop 02. htm 程式碼重點說明 n n document. write(window. location); document. write(window. screen. Left); document. write(window. screen. Top); 移動本範例的視窗，然後在更新此網頁，就可以看到不同的 X 和 Y 座標值。在一般的視窗系統，左上角為原點，向右為 X 座標的正向，向下為 Y 座標的正向。 8 /30

Java. Script 程式設計與應用：用於網頁用戶端視窗狀態列屬性 n n 一般而言，狀態列是在瀏覽器視窗的最下方，在預設的情況下，當你將滑鼠置於網頁中的一個連結時，瀏覽器就會在狀態列秀出此連結的網址。欲改變瀏覽器狀態列的文字，可將文字指定至下列兩個屬性： n n window. defaultstatus：狀態列的一般預設文字。 window. status：在特殊事件被觸發後，狀態列所顯示的文字。 9 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -2 n 主題：改變 window 物件的狀態列 n n n 連結：win. Status 01. htm 程式碼重點說明 n n window. default. Status="這是我的預設狀態訊息 "; <a href=“…” on. Mouse. Over="window. status='清華大學的首頁 '; return true“> 若預設的情況下不會顯示狀態列，可以使用瀏覽器的下拉式選單”檢視/狀態列”來設定顯示狀態列。此段程式碼必須回傳 true，否則 window. status 的改變將不會發生。 10 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -3 n 主題：展示document 物件的重要屬性 n n 連結：doc. Prop 02. htm 程式碼重點 document. write("document. last. Modified = "+document. last. Modified+"（本頁的最後修改時間） "); n 說明 n Document. last. Modified是最常用的屬性，可以傳回網頁最後修改時間，讓其他使用者知道此網頁的有效性。 11 /30

Java. Script 程式設計與應用：用於網頁用戶端防止使用者盜連的屬性 n 要防止其他網頁的盜連，所使用的 document 的性質是： n n n document. location：本頁的網址（可以修改以進行轉址） document. referrer：連結到本頁的前一頁網址說明 n Java. Script 用戶端是使用 referrer，但是在伺服端卻是使用 referer (之後章節會再說明)。 12 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -4 n 主題：使用 document. referrer 以防盜連 n n 連結：referrer 01 master. htm (主頁面) referrer 01 slave. htm (欲連結的頁面) 程式碼重點 document. referrer. index. Of("referrer 01 master. htm")==-1 n 說明 n n n index. Of()方法在找不到比對中的字串時，會回傳 1，找得到時，會回傳第一個字的index。如果直接在網址列上輸入第二個連結的網址， referrer並不會記錄前一個網頁的網址。 13 此範例必須經由網頁伺服器，才能正常展示。/30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -5 n 主題：展示navigator 物件的幾個重要性質 n n 連結：nav. Prop 02. htm 說明 n n 我們只要使用 navigator 物件的各種屬性，就可以知道使用者的瀏覽器類別、版本、CPU 類別、平台、是否支援小餅乾之類的資訊，對於撰寫跨平台的 Java. Script 程式碼非常有用。 nav. Prop 01. htm: 利用for-loop印出navigator物件的所有性質。（不同的瀏覽器會有不同的結果！） 14 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -6 n 主題：列出網頁文件中的物件所具有的性質 n n n 連結：list. Prop. js 程式碼說明 n function list. Prop(obj, obj. Name) { for (var i in obj) document. writeln(obj. Name+". “+i+ " = “+obj[i]+" "); } obj 是傳入函數的物件變數，obj. Name 則是物件名稱，區域變數 i 則會依次等於物件的每一個屬性名稱，obj[i] 則是對應屬性的值。 15 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -7 n 主題：用list. Prop. js展式document的屬性列表 n n 連結：doc. Prop 01. htm 程式碼重點 list. Prop(document, "document"); n 說明 n document 物件有許多性質，這些性質都可由上述方法逐一列出。若出現的性質的值是 [object]，代表此值是另一個物件，因此我們可以再次列出此物件的性質。 16 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -8 n 主題：列出document. links的屬性列表 n n 連結：doc. Link. Prop 01. htm 程式碼重點 list. Prop(document. links, "document. links"); n 說明 n 同理，另外兩種範例 n n win. Prop 01. htm：window 物件的屬性列表。 nav. Prop 01. htm：navigator 物件的屬性列表。 17 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -9 n 主題：使用DOM物件切換背景及音樂 n n 連結：bg. Sound 01. htm 程式碼重點 document. body. background = "image/" + img. URL[Math. floor(Math. random()*5)]; my. Music. src = "music/" + sound. URL[Math. floor(Math. random()*5)]; n 說明 n n 要設定背景圖片，可經由 document. body. background 來設定背景圖片的網址。我們可以使用 bgsound 標籤來加入背景音樂，並設定此物件的 id 屬性是 my. Music，然後再經由 my. Music. src 來設定背景音樂的網址。 18 /30

Java. Script 程式設計與應用：用於網頁用戶端取得標籤id n n 每一個 HTML 的標籤就是一個物件，我們可以使用標籤內的 id屬性來存取此物件，例如設定 id=id. Value。如果此標籤是在 document 的下一層（或是位於 <body> 及 </body> 內且不被其他標籤所包夾），則我們可以直接使用此 id. Value 來存取此物件。如果標籤是在層層 DOM 之下（例如表單內的文字欄位），那麼直接使用 id. Value 是無效的。只要 id. Value 在整個網頁是唯一的，我們可以使用下列方法來取得此物件 n document. get. Element. By. Id(id. Value)：這是我們建議的標準作法，符合 W 3 C 的標準。 19 /30

Java. Script 程式設計與應用：用於網頁用戶端使用name標籤取得物件 n n 對於每一個標籤，我們可以使用 name 標籤來指定此物件，但取用比id麻煩，必須從 document 開始抓取。 name在某些時候和id一樣可以直接存取，這可能是瀏覽器設計不嚴謹的的結果，我們並不建議採用這種作法。 20 /30

Java. Script 程式設計與應用：用於網頁用戶端 6 -2：DOM 的方法 n 本小節介紹DOM的各種方法(method)的使用。 21 /30

Java. Script 程式設計與應用：用於網頁用戶端 DOM方法的使用 n 基本結構物件名稱. 物件方法 (引數 ); n 說明 n 方法跟函數的差別在於，方法是附屬在某個物件，而函數是獨立出來，不過有些像Java的物件導向程式語言中，是沒有函數(function)，只有方法 (method)。 22 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -10 n 主題：展示history的方法 n n 連結： hist. Go 01. htm 程式碼重點 document. writeln(history. length) <a href="javascript: history. go(-1)">回前一頁 </a> <a href="javascript: history. go(0)">重新整理 </a> <a href="javascript: history. go(+1)">跳下一頁 </a> n 說明 n n history. length 記錄了以前瀏覽網頁的頁數。 history. go(n) 可以跳到之前瀏覽過的網頁。 n<0表示現在之前，n>0表示現在之後，n=0表示現在。可以省略window，直接使用底下的history 物件。 23 /30

Java. Script 程式設計與應用：用於網頁用戶端 window. open()方法使用 n 基本結構 window. Id=window. open(url, win. Name, win. Control. String, keep. History); n 說明 n n n 如果不設定參數，將會使用預設的參數。 url：新視窗所要顯示的檔案或網址。 win. Name：新視窗的名稱 win. Control. String：設定新視窗選項的字串，例如寬度、高度、位置、是否顯示狀態列等。 keep. History：是否保留 History 資料。 24 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -11 n 主題：示範window. open()方法 n n n 連結： win. Open 01. htm 程式碼重點 window. open(url, 'Detail', 'status=no, toolbar=no, width=8 00, height=600'); 說明 n n 「href=“#”」是一個「虛擬」的連結，當使用者點選此連結時，瀏覽器並不會嘗試去載入一個新網頁，而是經由 on. Click 事件去驅動 Java. Script 的程式碼來開啟新視窗。使用 HTML 所產生的連結，也可以產生新視窗，只要加入 target=_blank 的屬性就可以了，例如「<a target=_blank href=連結網址>連結文字</a>」，但是此方法並無法指定新視窗的各種屬性。 25 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -12 n 主題：使用window. open()控制新視窗的選項 n n 連結： win. Open 02. htm 說明 n n 範例中，當使用者按下「開啟新視窗」時，會將控制視窗選項的字串顯示在狀態列，以方便查看。 win. Fmt中的各種屬性在此不詳細列出說明，可以用list. Prop()函數來列出window物件的屬性，本章節最後亦有列表說明。 26 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -13 n 主題：利用 window. print() 列印網頁 n n n 連結： win. Print 01. htm 程式碼重點 <a href="#" on. Click="window. print()">列印此網頁 </a> <a href="javascript: window. print()">列印此網頁 </a> 說明 n n window. print()會呼叫瀏覽器提供的列印程式，將這個網頁列印下來。這是兩種不同驅動Java. Script程式碼的方式。 27 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -14 n 主題：利用window. move. By()產生視窗地震 n n 連結：win. Quake 01. htm 程式碼重點 window. move. By(0, x); window. move. By(x, 0); window. move. By(0, -x); window. move. By(-x, 0); n 說明 n move. By(x, y)的座標是相對於目前視窗的位置。 28 /30

Java. Script 程式設計與應用：用於網頁用戶端範例6 -15 n n 主題：使用 window. clipboard. Data. set. Data() 複製到剪貼簿 n 連結： win. Clipboard 01. htm n 程式碼重點說明 n n n <pre style="background-color: #EEEEEE; " ondblclick='javascript: window. clipboard. Data. set. Data ("Text", this. inner. Text); alert("你已經拷貝了蔣勳老師的情詩. . . "); '> ondblclick 是「on double click」的簡稱，代表滑鼠點選兩下後，所需執行的 Java. Script 程式。 window. clipboard. Data. set. Data() 將文字拷貝到剪貼簿。 this. inner. Text 就是目前標籤(此例是 pre 標籤)內所夾的文字。 29 /30

Java. Script 程式設計與應用：用於網頁用戶端 window與document詳細說明 n 由於篇幅有限，window與document的詳細說明列表如下，請自行查閱： n window 物件的性質、方法、事件、集合 n n 連結：瀏覽器window物件整理列表. htm document 物件的性質、方法、事件、集合 n 連結：瀏覽器document物件整理列表. htm 30 /30

第六章 文件物件模型 DOM 張智星 jang mirlab org http mirlab

第六章文件物件模型 DOM 張智星 jang mirlab org http mirlab