文件物件模型dom-棋峰资讯.pdfVIP

文件物件模型（DOM ） 本章介紹文件物件模型（ ，簡稱 ），這是動 Document Object Models DOM 態網頁的基礎，只要瞭解 DOM 的原理，以及相關物件的性質及方法，我們 就可以設計出具有高互動性的動態網頁。 JavaScript 程式設計與應用 6-1 DOM 的性質 當瀏覽器讀入一頁網頁時，就會根據此網頁的內容來建立相關的文件物件模 型（ ，簡稱 ），這是一個階層式的物件模型， Document Object Model DOM 包含了網頁的各種物件，我們需要瞭解這些物件的性質和方法，才能產生動 態的網頁，充分利用動態 （ ，簡稱 ）的各 HTML Dynamical HTML DHTML 種功能。 提示 這些物件的定義是根據 WWW Consortium 的標準來制訂，相關細節可以參考 其網站：/ 。 在文件物件模型中，所有的物件之間的關係，是由一個階層式的樹狀架構來 呈現，請見下圖： 6-2 第 6 章 文件物件模型（DOM ） 由上圖可以看出，window 物件是所有物件的始祖。而由每個物件的分支多 寡，就可以大概看出此物件的重要性，例如， window 其下最重要的物件是 ，而 其下最重要的物件是 。這些物件各有不同的性 document document form 質（ ）及方法（ ）， 可利用這些性質及方法來建 Properties Methods JavaScript 立網頁的互動性。 首先我們必須知道如何取得物件的性質，並進而改變這些性質，才能產生動 態網頁。欲存取物件的性質，有下列三種方法： 1. 用性質名稱來存取物件的性質（這是最常用到的方法）： objectNpertyName 2. 用性質名稱來存取物件的性質（此種方法同等於前一種方法，其好處 是：可將性質名稱以字串變數傳入）： objectName[propertyName] 3. 用索引來存取物件的性質（比較少用）： objectName[index] 首先，我們先看看 window 物件幾個常用的性質，利用這些性質，我們可以 立刻抓出目前網頁的網址，以及視窗的座標等資訊，範例如下： （ ） Example winProp02.htm window 物件的幾個基本性質 本頁的網址（ ）： 碁峰排版資料 window.location file:///D:/ /AEL011900--JavaScript 程式設計與應用 第二版 作者稿件 的性質 ( )/ /CH06/6-1%20DOM%20 .files/winProp02.htm 本視窗（可顯示網頁範圍）左上角的 座標（ ）： X- window.screenLeft 2 本視窗（可顯示網頁範圍）左上角的 座標（