DHTML初學者指南

核心要點

• 動態HTML (DHTML)並非一門獨立的編程語言，而是HTML的增強技術，它結合了HTML、JavaScript和CSS，使網頁具備動態特性。
• DHTML的主要功能是在不重新加載頁面的情況下動態改變網頁的外觀和內容，這依賴於第四代瀏覽器內置的功能。
• 不同瀏覽器對DHTML的實現差異很大；例如，Netscape Navigator 4使用<layer></layer>標籤，而Internet Explorer 4則依賴於與標準HTML標籤（如<div>和<code><table>）關聯的樣式對象。 <li>為了實現跨瀏覽器兼容性，DHTML需要根據瀏覽器使用不同的腳本技術，這突顯了對象檢測等瀏覽器檢測技術在高效腳本編寫中的重要性。 </li> <li>儘管AJAX和jQuery等新技術層出不窮，但DHTML仍然具有相關性，並且是創建交互式動態網頁內容的基礎技能。 </li> <p>作為一名自封的網站管理員，我盡力跟上最新的網絡技術。我目前正在學習DHTML，即動態HTML。在聽說了很多關於這項技術以及它最終將如何徹底改變互聯網的信息後，我認為我必須從沙發上站起來開始學習它，否則我就沒有資格再自稱“網站管理員”了。如果你對DHTML和我一樣一無所知，本教程正適合你。享受學習過程，如有任何問題，請隨時給我發郵件。 </p> <p>這是一個很好的問題，我承認我很難找到一個直接的答案。我記得在JavaScript新聞組上看到過一個帖子試圖用以下回復來回答這個問題：</p> <p><q>“DHTML是HTML和JavaScript的組合”</q>我自言自語道：“那不就是帶有JavaScript的網頁嗎？”我至少感到很困惑。在搜索引擎上搜索了數百個搜索結果，尋找那個難以捉摸的答案，我還是找不到。所以我想，管它呢，我先學習DHTML，然後再弄清楚它是什麼！現在我已經成為一名DHTML程序員了，我認為我已經準備好向你提供一個不錯的DHTML的一句話定義了：</p> <p><q>“DHTML是第四代瀏覽器中幾種內置瀏覽器功能的組合，這些功能使網頁更具動態性”</q>你看，DHTML不是腳本語言（如JavaScript），而僅僅是一個瀏覽器功能——或增強功能——它使你的瀏覽器能夠動態化。你真正需要學習的不是DHTML本身，而是使用DHTML所需的語法。在其他任何事情之前，你可能想快速訪問Dynamic Drive，看看這種語言能夠做什麼。 </p> <p>就像我說的，DHTML是一組功能的集合，這些功能共同使你的網頁具有動態性。我認為現在重要的是要定義DHTML的創建者在說“動態”時是什麼意思。 “動態”被定義為瀏覽器在文檔加載後改變網頁外觀和样式的能力。我記得當我學習JavaScript時，我被教導可以使用JavaScript的<code>document.write()方法動態創建網頁。例如：

  document.write("This is text created on the fly!")

  我記得當時對自己說：“還不錯”。但是，如果我想創建的內容不僅是動態的，而且是按需生成的怎麼辦？那時我還很天真，我嘗試這樣做，通過將上面的代碼嵌套在一個函數中，並通過表單按鈕調用它：

  按下按鈕簡直是令人大失所望。我的整個網頁都被擦除了，只剩下函數生成的文本。

  那是過去。現在，隨著DHTML的引入，我可以根據需要隨時更改網頁上的內容，而無需瀏覽器擦除其他所有內容。這就是DHTML的全部意義所在。瀏覽器即使在文檔加載後也能改變外觀和样式的能力。

  既然我已經讓你興奮不已了，我認為公平起見，我應該潑點冷水。 DHTML技術目前正處於開發階段，NS 4和IE 4在其對這項偉大技術的實現方面差異很大。目前不可能編寫一段DHTML代碼並期望它在兩個瀏覽器中都能正常運行。此外，這兩個瀏覽器在其DHTML開發的不同階段；根據我自己的知識和我聽到的內容，IE 4中的DHTML比NS 4中的DHTML強大得多且用途更廣。我不想幫助傳播任何宣傳，所以我到此為止。

  這可能是好事，也可能是壞事，這取決於你的觀點。 NS 4中的DHTML非常簡單，基本上可以歸結為一個詞——Layer。我自己也很驚訝，但這是真的——NS 4完全依賴於一個名為<layer></layer>的新標籤來發揮其DHTML的魔力。這個新標籤是動態的，因為它可以放置在網頁上的任何位置（與其他內容無關），可以四處移動，其內部內容可以按需更新，等等。

  基本語法

  <layer></layer>標籤的基本語法再簡單不過了（好像HTML中的任何標籤都很複雜一樣！）：

  <layer>層內文本<code><layer>层内文本</layer>

  <layer></layer>標籤是一個內容標籤，這意味著你可以向其中添加內容（如<table>）。繼續嘗試將上面的代碼插入到你的頁面中……你會注意到層內的文本浮在其他文本之上，並與它們重疊。想像一下，一個層就像一張紙，位於頁面的其餘部分之上，並且不佔用文檔流中的空間。 <h5>層屬性</h5> <p>一個單獨的層可能很無聊，更不用說沒用了。幸運的是，它還有更多功能。層支持屬性，允許你使用x、y坐標係對其進行定位，為其提供背景，剪輯它（使層的特定區域可見），將其隱藏等等。我在下面列出了最重要的層屬性：</p> <table> <thead> <tr> <th>层属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>id 层的名称，用于在脚本中标识它 left 层相对于x坐标的位置 top 层相对于y坐标的位置 width 层的宽度，以px或%为单位 height 层的高度，以px或%为单位 bgColor 层的背景颜色 background 层的背景图像 src 层中包含的外部HTML文档

  你可以隨意混合和匹配不同的屬性。

  點擊此處查看一個使用上述某些屬性的示例層

  請注意，我沒有指定left和top屬性。當你沒有指定時，層將被放置在你定義它的位置。

  腳本層

  這是關於層最重要的事情之一——如何編寫它們的腳本。畢竟，正是腳本使層活躍起來。要訪問一個層，你需要使用以下語法：

  document.layername

  訪問層只是第一步。一旦你訪問了一個層，你就可以繼續操作層的屬性之一以產生動態效果。

  點擊此處查看一個示例，其中層的背景顏色在紅色和藍色之間切換。

  所有層的屬性都是可讀寫的，所以一定要嘗試每一個屬性！

  當我開始學習IE 4對DHTML的實現時，我意識到它比NS對應版本要復雜得多。 IE中的DHTML不依賴於任何一個標籤，而是依賴於你習慣使用的常用HTML標籤（如

  和）產生的新對象和屬性。它功能更強大，但同時也更難掌握。

  IE 4的樣式對象

  IE 4中的HTML元素現在都支持一個樣式對象，它本質上是用於動態操作該元素的外觀和“感覺”的“動態”對象。與<layer></layer>標籤一樣，元素也可以分配一個“id”屬性，然後可以在腳本編寫期間使用它來標識它。例如：

  <div id="adiv"></div>

  在你的腳本中，訪問“adiv”的樣式對象所需的語法如下所示：

  adiv.style<code>adiv.style

  樣式對象包含許多屬性，通過操作這些屬性，你可以動態地改變元素的外觀。我現在將展示其中一些屬性：

  樣式對象的重要屬性

  1. backgroundColor<code>backgroundColor 元素的背景顏色
  2. backgroundImage<code>backgroundImage 元素的背景圖像
  3. color<code>color 元素的顏色
  4. position<code>position 元素的位置類型。可接受的值為“absolute”和“relative”
  5. pixelWidth<code>pixelWidth 元素的寬度
  6. pixelHeight<code>pixelHeight 元素的高度
  7. pixelLeft<code>pixelLeft 元素相對於x坐標的位置
  8. pixelTop<code>pixelTop 元素相對於y坐標的位置

  上述屬性僅代表所有受支持屬性的一個子集，但它們是最常用的屬性。操作任何樣式屬性的基本語法都是相同的，我將在稍後展示。通過訪問這些屬性，我們可以改變大多數HTML元素的外觀和样式（而不是Netscape中的<layer></layer>標籤！）。

  點擊此處查看一個簡單的演示

  請注意我是如何更改文本顏色的：

  sometext.style.color = 'red'<code>sometext.style.color = 'red'

  我首先使用元素的id來訪問它，然後通過樣式對象，最後通過樣式的顏色屬性，我能夠輕鬆地根據需要更改文本的顏色！

  所有樣式屬性都是可讀寫的，並且以類似的方式訪問：元素id->樣式對象->屬性名稱。

  點擊此處查看另一個示例，該示例在鼠標懸停在圖像上時會展開圖像，並在鼠標移出時將其恢復到原始大小。

  是的，我知道它並不是世界上最實用的例子，但它確實很好地說明了DHTML的工作原理。圖像按需更改尺寸，無需重新加載文檔。這是JavaScript單獨無法做到的。

  如果你還沒有被NS 4和IE 4中DHTML的語法和功能差異嚇跑，那麼你就可以學習如何使頁面上的內容動態化，或者根據需要進行更改！

  NS 4中的動態內容

  更改NS 4中的內容涉及——你猜對了——layer<code>layer標籤。所有層都被NS瀏覽器視為與頁面其餘部分不同的實體，它們有自己的文檔對象（該對象又包含文檔支持的其他對象）。理解這一點非常重要，因為層包含另一個文檔對象的事實使得在NS中創建動態內容成為可能。我將首先構建一個基本的層，然後展示如何更改其內部的內容：

  <layer height="30" id="alayer" width="100%"><code><layer height="30" id="alayer" width="100%"></layer>

  準備好訪問上述層的文檔對象了嗎？以下是所需的語法：

  document.alayer.documentdocument.alayer.document

  因此，了解了這一信息，我可以編寫一個腳本，每3秒更改一次層的內容。

  點擊此處查看如何在Netscape中完成此操作的示例。

  文本正在動態生成和擦除，無需重新加載文檔！

  IE 4中的動態內容

  在IE 4中，動態內容是通過一個名為innerHTML的特殊屬性實現的，該屬性存在於<span></span>和

  標籤中。只需將此屬性設置為新的HTML值，<span></span>或

  內部的內容就會立即更新為新值！我將通過修改上面的示例來為IE 4用戶創建動態內容來說明如何做到這一點：點擊此處查看適用於IE的示例。

  相同的結果，只是實現方式不同！

  如果你喜歡使用動畫，你會很高興知道，使用DHTML，整個網頁現在都是你的畫布！你可以創建自由地在屏幕上飛行的內容。在Netscape中，這是通過操作<layer></layer>標籤的left和top屬性來完成的。在IE 4中，通過更改樣式對象的pixelLeft和pixelTop屬性來完成相同的事情。

  在NS 4中移動元素

  回想一下第2課中，層支持left和top屬性，它們控制其相對於文檔左上角的偏移量。好吧，通過使用簡單的數學運算和幾行腳本，我們可以動態更新這些屬性，以便層移動！以下示例更改層的left屬性，以便在按下按鈕時它水平移動。

  點擊此處查看示例。

  你看，我所做的只是不斷地添加到“space”的left屬性以使其移動，並在我想將層返回到其初始位置時將屬性設置回其原始值。

  在IE 4中移動元素

  順便說一句，NS和IE就DHTML的一種實現達成一致的那一天，就是我可以停止編寫兩個版本的每件事物的那一天（只是發洩一下我的挫敗感）。在IE 4中移動元素基本上首先需要將該元素包裝在定位的<span></span>或

  內，然後更改<span></span>或<div>的<code>pixelLeft和pixelTop屬性。聽起來很複雜，但實際上非常簡單。

  點擊此處查看示例。

  我首先所做的是將名為“spaceship”的外部<div>設置為相對位置，這對於使元素可移動是必要的（你也可以將其設置為“absolute”值）。然後，通過操作其樣式對象的<code>pixelWidth屬性，元素移動。

  在“真正的”跨瀏覽器DHTML可用之前（換句話說，當NS和IE恢復理智時），跨瀏覽器DHTML基本上意味著使用你在那些JavaScript年中選擇的各種腳本技術來嗅探出用戶正在使用的瀏覽器，並執行為該瀏覽器設計的代碼。在本課中，我將首先說明創建“跨瀏覽器”層的一種方法，然後向你展示我最近學習的一種腳本技術，該技術允許你輕鬆嗅探出瀏覽器的類型。

  創建“跨瀏覽器”層

  好的，我們有NS理解<layer></layer>標籤，IE理解<span></span>和<div>。如果我們想創建一個簡單的DHTML效果，例如移動圖像，我們通常需要使用兩個標籤——一個用於NS 4的<code>layer標籤，以及一個用於IE 4的div或span標籤。不太漂亮，對吧？好吧，我最近了解到，實際上有一種方法可以使用一個標籤來創建一個“跨瀏覽器”層，儘管它在NS方面有點bug。顯然，NS 4將絕對定位的div視為與層相同。因此，無需進一步延遲，這是一個跨瀏覽器層的示例：<div id="crosslayer" style="position:absolute"></div>NS 4將上面的div<code>div視為與層完全相同。像任何其他層一樣，要訪問它，我們首先要通過文檔對象，然後是層的id：

  document.crosslayer<code>document.crosslayer

  在IE 4中，我們將簡單地使用div<code>div的id：

  crosslayer<code>crosslayer

  我發現，在NS中，以這種方式指定層雖然在跨瀏覽器兼容性方面很方便，但有一個主要的缺點。這樣的層並不總是像正常的層那樣運行，有時甚至會使瀏覽器崩潰。準備好迎接意想不到的情況吧！

  瀏覽器嗅探——對象檢測

  直到最近，每當我想要確定用戶的瀏覽器類型時，我都會像大多數JavaScript程序員一樣使用navigator<code>navigator對象。下面說明了使用此對象來嗅探NS 4和IE 4：

  var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4)<code>var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4) var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)<code>var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)

  我個人討厭使用navigator<code>navigator對象——它使用起來太複雜了（看看上面的混亂吧！）。好吧，我有好消息要告訴你。實際上有一種更快的方法來嗅探各種瀏覽器，它被稱為對象檢測。

  這個想法是基於JavaScript的工作方式。如果瀏覽器不支持特定的對象，則當你引用它時，JavaScript會返回null<code>null。了解這一事實，我們可以在if<code>if語句中使用對象引用（代替navigator<code>navigator對象）來確定用戶的瀏覽器。

  讓我們舉個例子。我們知道NS 3 和IE 4 支持document.images<code>document.images對象。如果我們想嗅探這些瀏覽器，我們會這樣做：

  if (document.images) alert("You are using NS 3 or IE 4 ")<code>if (document.images) alert("You are using NS 3 or IE 4 ")

  將上述內容翻譯成英語，它的意思是：“如果瀏覽器支持images<code>images對象（只有NS 3 和IE 4 支持），則發出警告消息”。

  將對象檢測視為確定用戶瀏覽器類型的一種間接方法。對象檢測不是直接確定用戶瀏覽器名稱和版本（通過navigator<code>navigator對象），而是一種更通用、更省事的瀏覽器嗅探技術。

  那麼，我們如何使用對象檢測來嗅探NS 4和IE 4呢？好吧，只有NS 4支持document.layers<code>document.layers對象，只有IE 4支持document.all<code>document.all。我們可以利用這些知識輕鬆確定用戶是否正在使用NS 4、IE 4或兩者：

  if (document.layers) alert("You are using NS 4 ")<code>if (document.layers) alert("You are using NS 4 ") if (document.all) alert("You are using IE 4 ")<code>if (document.all) alert("You are using IE 4 ")

  if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")<code>if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")

  現在你再也不用返回到混亂的navigator<code>navigator對象來進行瀏覽器嗅探了！

  DHTML資源

  顯然，本教程僅作為DHTML的介紹。以下是一些繼續你的DHTML學習之旅的優秀資源：

  • Dynamic Drive DHTML示例
  • MSDN的DHTML指南

  動態HTML (DHTML)常見問題解答

  HTML和DHTML有什麼區別？

  HTML（超文本標記語言）是一種用於創建網頁的標準標記語言。它是靜態的，這意味著它一旦加載就不會改變。另一方面，DHTML（動態HTML）不是一種獨立的語言，而是HTML的擴展。它結合了HTML、JavaScript和CSS來創建交互式和動態的網頁內容。這意味著DHTML允許網頁在不需要重新加載頁面的情況下進行更改並與用戶交互。

  DHTML如何增強用戶交互？

  DHTML通過允許網頁在不重新加載頁面的情況下對用戶輸入做出反應來增強用戶交互。這是通過使用JavaScript和CSS來實現的。例如，DHTML可用於創建下拉菜單、動畫和其他交互式功能。這使得用戶體驗更具吸引力和效率。

  我可以將DHTML與其他編程語言一起使用嗎？

  是的，DHTML可以與其他編程語言一起使用。雖然DHTML本身是HTML、CSS和JavaScript的組合，但它也可以與PHP和ASP.NET等語言交互。這允許創建更複雜和動態的Web應用程序。

  DHTML今天仍然相關嗎？

  雖然AJAX和jQuery等新技術已經流行起來，但DHTML仍然相關且被廣泛使用。它是Web開發的基礎部分，理解DHTML可以為學習更高級的Web技術提供堅實的基礎。

  DHTML的一些常見用途是什麼？

  DHTML通常用於創建交互式網頁內容。這包括下拉菜單、表單驗證、動畫和圖像滾動等。它還可以用於創建單頁應用程序，其中整個站點或應用程序都加載在一個HTML頁面中。

  DHTML如何提高網站性能？

  通過允許網頁在不重新加載頁面的情況下對用戶輸入做出反應，DHTML可以顯著提高網站性能。這減少了服務器負載，並使用戶體驗更流暢、更快。

  DHTML的組件是什麼？

  DHTML由四個主要組件組成：HTML、CSS、JavaScript和文檔對像模型 (DOM)。 HTML提供頁面的結構，CSS控制演示文稿，JavaScript啟用交互性，而DOM允許操作頁面元素。

  DHTML如何與文檔對像模型 (DOM) 一起工作？

  文檔對像模型 (DOM) 是DHTML的關鍵部分。它提供網頁的結構化表示，可以使用JavaScript進行操作。這允許根據用戶輸入動態更改頁面。

  DHTML難學嗎？

  學習DHTML的難度因你之前的知識和Web開發經驗而異。如果你已經熟悉HTML、CSS和JavaScript，學習DHTML將是這些技能的自然延伸。但是，如果你不熟悉Web開發，那麼可能需要一些時間才能掌握這些概念。

  我在哪裡可以學習更多關於DHTML的知識？

  網上有很多資源可以學習DHTML。 GeeksforGeeks、JavaTPoint和TutorialsPoint等網站提供全面的指南和教程。此外，你可以在YouTube等平台上找到許多視頻教程。