DHTML物件模型(About the DHTML Object Model)(一)

來源:互聯網
上載者:User
dhtml|model|object|對象|dhtml 【註:最近在學習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=http://www.163design.net/a/j/"mygif.gif">
</DIV>
<IMG id=image2 src=http://www.163design.net/a/j/"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)



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。