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等平台上找到许多视频教程。