DHTML對像模型（About the DHTML Object Model）(一)

- 中國WEB開發者網絡 (http://www.webasp.net)
-- 技術教程 (http://www.webasp.net/article/)
--- DHTML對像模型（About the DHTML Object Model）(一) (http://www.webasp.net/article/9/8121.htm)
-- 作者：未知
-- 發佈日期： 2004-02-28
【註：最近在學習asp.net，覺得javascript的很多知識在asp.net中仍很有用，又覺得javascript的實質是利用腳本對DHTML對像編程，但網上關於DHTML層次結構的中文資料又比較少，所以看了msdn上的這個資料後就翻譯了出來，希望大家多多指教。】
DHTML對像模型（About the DHTML Object Model）


動態HTML(DHTML)文檔對像模型（Document Object Model :DOM）使網頁製作者可以直接地以可編程的方式訪問Web文檔上每個獨立的部分，而不論被訪問的是元素還是容器。這種訪問方式包括了事件模型，事件模型令瀏覽器可對用戶輸入做出反應，通過執行腳本，無須從服務器下載一個新的頁面就可以根據用戶輸入顯示新的內容。動態HTML文檔對像模型(DHTML DOM)以一種便捷的方式為廣大普通網頁製作者提供了豐富的網頁交互性。



· 什麼是對像模型？（What Is the Object Model?）

· 使用腳本訪問元素（Accessing Elements with Script）

· 事件：冒泡，禁止與處理（Events: Bubbling, Canceling, and Handling）

· 處理鼠標效果　（Handling Rollover Effects）

· 禁止事件　（Canceling Events）

· 進一步的思考　（Special Considerations）

· 相關主題（Related Topics）



什麼是對像模型？
對像模型就是令DHTML可編程的結構，它不需要網頁製作者學習任何新的HTML標記，它也不涉及任何新的網頁製作技術。事實上，事實上這個對象模型是建基於網頁製作者過去已經習慣的網頁製作技術的。回憶一下你有否嘗試過使用腳本來為表單（form）元素設置值，又或者使用腳本來為一個微軟IE3.0瀏覽器中的鏈接添加一個mouseover事件；如果有，那麼你已經在通過腳本使用DHTML對像模型的一個有限形式來訪問你的HTML網頁了。

現在這個DHTML對像模型的唯一不同是：現在，任何一個HTML元素都是可編程的。這意味著頁面上的任何一個HTML元素都可以擁有相應的腳本，可以使用這些腳本代碼來使頁面與用戶的動作發生交互，動態地改變頁面內容。這種事件模型使文檔(document)可以在用戶對頁面做出某種動作（例如，當用戶把鼠標指針移動到一個特定的元素上，或者按下了鍵盤按鍵，又或者在表單中輸入了新的信息）後，做出相應的反應。每一個事件都可以被鏈接到一段腳本以告訴瀏覽器如何在這次交互中變更內容，而無需返回服務器去獲取一個新的文件。這帶來的好處是，網頁製作者可以用更少的頁面製作出富交互性的代碼。而網頁的瀏覽者因為無需等待新的頁面從網站下載到客戶端，無論從瀏覽速度到瀏覽效果都得到了全面的提升。

使用腳本訪問元素
在對像模型中每一個HTML元素都是一個可編寫腳本的對象，擁有自己的一組屬性(properties)、方法（Methods）和事件（Events）。要為元素對像編寫腳本，網頁製作者首先必須知道如何獲取一個對象。

DHTML的焦點是元素的集合（collection），以及這些元素如何被組織進一個層次結構中。這些元素集合中最重要的就是all集合(all collection)和children集合(children collection)。一個DHTML文檔就是一組結構化地排列的元素在下面的例子裡每個元素都有其各自的影響範圍，這個範圍取決於這個標記在文檔中出現的位置。

<HTML>
<BODY>
<DIV>
<P>Some text in a
<B>paragraph</B>
</P>
<IMG id=image1 src="mygif.gif">
</DIV>
<IMG id=image2 src="mygif.gif">
</BODY>
</HTML>
在上面的例子中div對像包含了一個p對像和一個叫image1的img對象，同時也是這兩個對象的父級（parent），相對地p對像和img對象是div對象的孩子(children)。而叫image2的img對象，則是body對象的孩子。

每一個元素對象都有一個叫做all的對象集合和一個叫children的對象集合，all的對象集包含了在這個元素層次結構下的所有對象，而children對像集合則包含了當前元素的所有直接子代元素。在上面的例子中，b在div對象的all集合中，但不會出現在div對象的children集合中；同樣地，div對象是body對像all集合中的一個成員，而p對像則不是。

每一個元素除了擁有上面所說的集合外，文檔（由document對像表示）本身還擁有一系列元素和非元素集合,其中最重要的一個集合就是all集合，它包含了在當前web頁面上的所有元素，這個集合是腳本語言訪問元素對象的最基本途徑。有關使用元素對像集合的更多信息，請參閱「對元素和集合編寫腳本」（Scripting with Elements and Collections）
webasp.net