張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 第六章 文件物件模型（DOM） 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室
本章大綱 大綱 本章介紹文件物件模型(Document Object Models，簡稱 DOM)，這是動態網頁的基礎，只要瞭解 DOM 的原理，以及相關物件的性質及方法，我們就可以設計出具有高互動性的動態網頁。 主題 6-1：DOM 的性質 6-2：DOM 的方法
6-1：DOM 的性質 本小節介紹DOM的概念，以及JavaScript內建物件的屬性。
DOM的簡介 當瀏覽器讀入一頁網頁時，就會根據此網頁的內容來建立相關的文件物件模型（Document Object Model，簡稱 DOM）。 DOM是一個階層式的物件模型，包含了網頁的各種物件，我們需要瞭解這些物件的性質和方法，才能產生具有互動性的網頁。 這些物件的定義是根據 WWW Consortium 所的標準來制訂，相關細節可以參考其網站：http://www.w3c.org。
物件之間的關係(1)
物件之間的關係(2) 說明 由圖可以看出，window 物件是所有物件的始祖。 每個物件的分支多寡，就可以大概看出此物件的重要性。 這些物件各有不同的性質 (Properties) 及方法 (Methods)，JavaScript 可利用這些性質及方法來建立網頁的互動性。
存取物件的性質 我們必須知道如何取得物件的性質，並進而改變這些性質，才能產生動態網頁。欲存取物件的性質，有三種方法： 用屬性名稱來存取物件的屬性(這是最常用到的方法) 例如：物件名稱.屬性名稱 用性質名稱來存取物件的性質(此種方法同等於前一種方法，其好處是：可將性質名稱以字串變數傳入) 例如：物件名稱[“屬性名稱”] 用索引來存取物件的性質(比較少用) 例如：物件名稱[index]
範例6-1 主題：展示window 物件的幾個基本性質 說明 連結：winProp02.htm 程式碼重點 移動本範例的視窗，然後在更新此網頁，就可以看到不同的 X 和 Y 座標值。 在一般的視窗系統，左上角為原點，向右為 X 座標的正向，向下為 Y 座標的正向。 document.write(window.location); document.write(window.screenLeft); document.write(window.screenTop);
視窗狀態列屬性 一般而言，狀態列是在瀏覽器視窗的最下方，在預設的情況下，當你將滑鼠置於網頁中的一個連結時，瀏覽器就會在狀態列秀出此連結的網址。 欲改變瀏覽器狀態列的文字，可將文字指定至下列兩個屬性： window.defaultstatus：狀態列的一般預設文字。 window.status：在特殊事件被觸發後，狀態列所顯示的文字。
範例6-2 主題：改變 window 物件的狀態列 說明 連結：winStatus01.htm 程式碼重點 若預設的情況下不會顯示狀態列，可以使用瀏覽器的下拉式選單”檢視/狀態列”來設定顯示狀態列。 此段程式碼必須回傳 true，否則 window.status 的改變將不會發生。 window.defaultStatus="這是我的預設狀態訊息"; <a href=“…” onMouseOver="window.status='清華大學的首頁'; return true“>
範例6-3 主題：展示document 物件的重要屬性 說明 連結：docProp02.htm 程式碼重點 Document.lastModified是最常用的屬性，可以傳回網頁最後修改時間，讓其他使用者知道此網頁的有效性。 document.write("document.lastModified = <font color=red>"+document.lastModified+"</font>（本頁的最後修改時間）<br>");
防止使用者盜連的屬性 要防止其他網頁的盜連，所使用的 document 的性質是： 說明 document.location：本頁的網址（可以修改以進行轉址） document.referrer：連結到本頁的前一頁網址 說明 JavaScript 用戶端是使用 referrer，但是在伺服端卻是使用 referer (之後章節會再說明)。
範例6-4 主題：使用 document.referrer 以防盜連 說明 連結：referrer01master.htm (主頁面) referrer01slave.htm (欲連結的頁面) 程式碼重點 說明 indexOf()方法在找不到比對中的字串時，會回傳-1，找得到時，會回傳第一個字的index。 如果直接在網址列上輸入第二個連結的網址，referrer並不會記錄前一個網頁的網址。 此範例必須經由網頁伺服器，才能正常展示。 document.referrer.indexOf("referrer01master.htm")==-1
範例6-5 主題：展示navigator 物件的幾個重要性質 說明 連結：navProp02.htm 我們只要使用 navigator 物件的各種屬性，就可以知道使用者的瀏覽器類別、版本、CPU 類別、平台、是否支援小餅乾之類的資訊，對於撰寫跨平台的 JavaScript 程式碼非常有用。 navProp01.htm: 利用for-loop印出navigator物件的所有性質。（不同的瀏覽器會有不同的結果！）
範例6-6 主題：列出網頁文件中的物件所具有的性質 說明 連結：listProp.js 程式碼 obj 是傳入函數的物件變數，objName 則是物件名稱，區域變數 i 則會依次等於物件的每一個屬性名稱，obj[i] 則是對應屬性的值。 function listProp(obj, objName) { for (var i in obj) document.writeln(objName+".<font color=red>“+i+ "</font> = <font color=green>“+obj[i]+"</font><br>"); }
範例6-7 主題：用listProp.js展式document的屬性列表 說明 連結：docProp01.htm 程式碼重點 document 物件有許多性質，這些性質都可由上述方法逐一列出。若出現的性質的值是 [object]，代表此值是另一個物件，因此我們可以再次列出此物件的性質。 listProp(document, "document");
範例6-8 主題：列出document.links的屬性列表 說明 連結：docLinkProp01.htm 程式碼重點 同理，另外兩種範例 winProp01.htm：window 物件的屬性列表。 navProp01.htm：navigator 物件的屬性列表 。 listProp(document.links, "document.links");
範例6-9 主題：使用DOM物件切換背景及音樂 說明 連結：bgSound01.htm 程式碼重點 要設定背景圖片，可經由 document.body.background 來設定背景圖片的網址。 我們可以使用 bgsound 標籤來加入背景音樂，並設定此物件的 id 屬性是 myMusic，然後再經由 myMusic.src 來設定背景音樂的網址。 document.body.background = "image/" + imgURL[Math.floor(Math.random()*5)]; myMusic.src = "music/" + soundURL[Math.floor(Math.random()*5)];
取得標籤id 每一個 HTML 的標籤就是一個物件，我們可以使用標籤內的id屬性來存取此物件，例如設定 id=idValue。 如果此標籤是在 document 的下一層（或是位於 <body> 及 </body> 內且不被其他標籤所包夾），則我們可以直接使用此 idValue 來存取此物件。 如果標籤是在層層 DOM 之下（例如表單內的文字欄位），那麼直接使用 idValue 是無效的。 只要 idValue 在整個網頁是唯一的，我們可以使用下列方法來取得此物件 document.getElementById(idValue)：這是我們建議的標準作法，符合 W3C 的標準。
使用name標籤取得物件 對於每一個標籤，我們可以使用 name 標籤來指定此物件，但取用比id麻煩，必須從 document 開始抓取。
6-2：DOM 的方法 本小節介紹DOM的各種方法(method)的使用。
DOM方法的使用 基本結構 說明 方法跟函數的差別在於，方法是附屬在某個物件，而函數是獨立出來，不過有些像Java的物件導向程式語言中，是沒有函數(function)，只有方法(method)。 物件名稱.物件方法(引數);
範例6-10 主題：展示history的方法 說明 連結： histGo01.htm 程式碼重點 history.length 記錄了以前瀏覽網頁的頁數。 history.go(n) 可以跳到之前瀏覽過的網頁。 n<0表示現在之前，n>0表示現在之後，n=0表示現在。 可以省略window，直接使用底下的history 物件。 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>
window.open()方法使用 基本結構 說明 如果不設定參數，將會使用預設的參數。 url：新視窗所要顯示的檔案或網址。 winName：新視窗的名稱 winControlString：設定新視窗選項的字串，例如寬度、高度、位置、是否顯示狀態列等。 keepHistory：是否保留 History 資料。 windowId=window.open(url, winName, winControlString, keepHistory);
範例6-11 主題：示範window.open()方法 說明 連結： winOpen01.htm 程式碼重點 window.open(url,'Detail','status=no,toolbar=no,width=800,height=600'); 說明 「href=“#”」是一個「虛擬」的連結，當使用者點選此連結時，瀏覽器並不會嘗試去載入一個新網頁，而是經由 onClick 事件去驅動 JavaScript 的程式碼來開啟新視窗。 使用 HTML 所產生的連結，也可以產生新視窗，只要加入 target=_blank 的屬性就可以了，例如「<a target=_blank href=連結網址>連結文字</a>」，但是此方法並無法指定新視窗的各種屬性。
範例6-12 主題：使用window.open()控制新視窗的選項 說明 連結： winOpen02.htm 範例中，當使用者按下「開啟新視窗」時，會將控制視窗選項的字串顯示在狀態列，以方便查看。 winFmt中的各種屬性在此不詳細列出說明，可以用listProp()函數來列出window物件的屬性，本章節最後亦有列表說明。
範例6-13 主題：利用 window.print() 列印網頁 說明 連結： winPrint01.htm 程式碼重點 這是兩種不同驅動JavaScript程式碼的方式。 <a href="#" onClick="window.print()">列印此網頁</a> <a href="javascript:window.print()">列印此網頁</a>
範例6-14 主題：利用window.moveBy()產生視窗地震 說明 連結：winQuake01.htm 程式碼重點 moveBy(x,y)的座標是相對於目前視窗的位置。 window.moveBy(0,x); window.moveBy(x,0); window.moveBy(0,-x); window.moveBy(-x,0);
範例6-15 說明 主題：使用 window.clipboardData.setData() 複製到剪貼簿 連結： winClipboard01.htm 程式碼重點 說明 ondblclick 是「on double click」的簡稱，代表滑鼠點選兩下後，所需執行的 JavaScript 程式。 window.clipboardData.setData() 將文字拷貝到剪貼簿。 this.innerText 就是目前標籤(此例是 pre 標籤)內所夾的文字。 <pre style="background-color:#EEEEEE;" ondblclick='javascript:window.clipboardData.setData("Text", this.innerText); alert("你已經拷貝了蔣勳老師的情詩...");'>
window與document詳細說明 由於篇幅有限，window與document的詳細說明列表如下，請自行查閱： 連結：瀏覽器window物件整理列表.htm document 物件的性質、方法、事件、集合 連結：瀏覽器document物件整理列表.htm