Transcript 06-文件物件模型（DOM）.

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