第 4 部分 利用 DOM 进行 Web 响应.docx

《第 4 部分 利用 DOM 进行 Web 响应.docx》由会员分享，可在线阅读，更多相关《第 4 部分 利用 DOM 进行 Web 响应.docx（16页珍藏版）》请在冰豆网上搜索。

第4部分利用DOM进行Web响应

与许多Web程序员一样，您可能使用过HTML。

HTML是程序员开始与Web页面打交道的方式；HTML通常是他们完成应用程序或站点前的最后一步——调整一些布局、颜色或样式。

不过，虽然经常使用HTML，但对于HTML转到浏览器呈现在屏幕上时到底发生了什么，人们普遍存在误解。

在我分析您认为可能发生的事情及其可能错误的原因之前，我希望您对设计和服务Web页面时涉及的过程一清二楚：

1.一些人（通常是您！

）在文本编辑器或IDE中创建HTML。

2.然后您将HTML上载到Web服务器，例如ApacheHTTPD，并将其公开在Internet或intranet上。

3.用户用Firefox或SafariA等浏览器请求您的Web页面。

4.用户的浏览器向您的服务器请求HTML。

5.浏览器将从服务器接收到的页面以图形和文本方式呈现；用户看到并激活Web页面。

这看起来非常基础，但事情很快会变得有趣起来。

事实上，步骤4和步骤5之间发生的巨大数量的“填充物（stuff）”就是本文的焦点。

术语“填充物”也十分适用，因为多数程序员从来没有真正考虑过当用户浏览器请求显示标记时到底在标记身上发生了什么。

∙是否浏览器只是读取HTML中的文本并将其显示？

∙CSS呢？

尤其是当CSS位于外部文件时。

∙JavaScript呢？

它也通常位于外部文件中。

∙浏览器如何处理这些项，如果将事件处理程序、函数和样式映射到该文本标记？

实践证明，所有这些问题的答案都是DocumentObjectModel。

因此，废话少说，直接研究DOM。

Web程序员和标记

对于多数程序员，当Web浏览器开始时他们的工作就结束了。

也就是说，将一个HTML文件放入Web浏览器的目录上后，您通常就认为它已经“完成”，而且（满怀希望地）认为再也不会考虑它！

说到编写干净、组织良好的页面时，这也是一个伟大的目标；希望您的标记跨浏览器、用各种版本的CSS和JavaScript显示它应该显示的内容，一点错都没有。

问题是这种方法限制了程序员对浏览器中真正发生的事情的理解。

更重要的是，它限制了您用客户端JavaScript动态更新、更改和重构Web页面的能力。

摆脱这种限制，让您的Web站点拥有更大的交互性和创造性。

程序员做什么

作为典型的Web程序员，您可能启动文本编辑和IDE后就开始输入HTML、CSS甚至JavaScript。

很容易认为这些标记、选择器和属性只是使站点正确显示而做的小小的任务。

但是，在这一点上您需要拓展您的思路，要意识到您是在组织您的内容。

不要担心；我保证这不会变成关于标记美观、您必须如何认识到Web页面的真正潜力或其他任何元物质的讲座。

您需要了解的是您在Web开发中到底是什么角色。

说到页面的外观，顶多您只能提提建议。

您提供CSS样式表时，用户可以覆盖您的样式选择。

您提供字体大小时，用户浏览器可以为视障者更改这些大小，或者在大显示器（具有同等大的分辨率）上按比例缩小。

甚至您选择的颜色和字体也受制于用户显示器和用户在其系统上安装的字体。

虽然尽您所能来设计页面样式很不错，但这绝不是 您对Web页面的最大影响。

您绝对控制的是Web页面的结构。

您的标记不可更改，用户就不能乱弄；他们的浏览器只能从您的Web服务器检索标记并显示它（虽然样式更符合用户的品味而不是您自己的品味）。

但页面组织，不管是在该段落内还是在其他分区，都只由您单独决定。

要是想实际更改您的页面（这是大多数Ajax应用程序所关注的），您操作的是页面的结构。

尽管很容易更改一段文本的颜色，但在现有页面上添加文本或整个区段要难得多。

不管用户如何设计该区段的样式，都是由您控制页面本身的组织。

标记做什么

一旦意识到您的标记是真正与组织相关的，您就会对它另眼相看了。

不会认为 h1 导致文本是大字号、黑色、粗体的，而会认为 h1 是标题。

用户如何看待这个问题以及他们是使用您的CSS、他们自己的CSS还是这两者的组合，这是次要的考虑事项。

相反，要意识到只有标记才能提供这种级别的组织；p 指明文本在段落内，img 表示图像，div 将页面分成区段，等等。

还应该清楚，样式和行为（事件处理程序和JavaScript）是在事后 应用于该组织的。

标记就绪以后才能对其进行操作或设计样式。

所以，正如您可以将CSS保存在HTML的外部文件中一样，标记的组织与其样式、格式和行为是分离的。

虽然您肯定可以用JavaScript更改元素或文本的样式，但实际更改您的标记所布置的组织却更加有趣。

只要牢记您的标记只为您的页面提供组织、框架，您就能立于不败之地。

再前进一小步，您就会明白浏览器是如何接受所有的文本组织并将其转变为超级有趣的一些东西的，即一组对象，其中每个对象都可被更改、添加或删除。

关于标记的其他想法

纯文本编辑：

是对是错？

纯文本是存储标记的理想选择，但是不适合编辑 标记。

大行其道的是使用IDE，比如MacromediaDreamWeaver或更强势点的Microsoft®FrontPage®，来操作Web页面标记。

这些环境通常提供快捷方式和帮助来创建Web页面，尤其是在使用CSS和JavaScript时，二者都来自实际页面标记以外的文件。

许多人仍偏爱好用古老的记事本或vi（我承认我也是其中一员），这并不要紧。

不管怎样，最终结果都是充满标记的文本文件。

网络上的文本：

好东西

已经说过，文本是文档的最好媒体，比如HTML或CSS，在网络上被千百次地传输。

当我说浏览器表示文本很难时，是特指将文本转换为用户查看的可视图形页面。

这与浏览器实际上如何从Web浏览器检索页面没有关系；在这种情况下，文本仍然是最佳选择。

文本标记的优点

在讨论Web浏览器之前，值得考虑一下为什么纯文本绝对 是存储HTML的最佳选择（有关详细信息，请参阅 有关标记的一些其他想法）。

不考虑优缺点，只是回忆一下在每次查看页面时HTML是通过网络发送到Web浏览器的（为了简洁，不考虑高速缓存等）。

真是再没有比传递文本再有效的方法了。

二进制对象、页面图形表示、重新组织的标记块等等，所有这一切都比纯文本文件通过网络传递要更困难。

此外，浏览器也为此增光添彩。

今天的浏览器允许用户更改文本大小、按比例伸缩图像、下载页面的CSS或JavaScript（大多数情况），甚至更多，这完全排除了将任何类型的页面图形表示发送到浏览器上。

但是，浏览器需要原HTML，这样它才能在浏览器中对页面应用任何处理，而不是信任浏览器去处理该任务。

同样地，将CSS从JavaScript分离和将CSS从HTML标记分离要求一种容易分离的格式。

文本文件又一次成为该任务的最好方法。

最后但同样重要的一点是，记住，新标准（比如HTML4.01与XHTML1.0和1.1）承诺将内容（页面中的数据）与表示和样式（通常由CSS应用）分离。

如果程序员要将HTML与CSS分离，然后强制浏览器检索粘结页面各部分的一些页面表示，这会失去这些标准的多数优点。

保持这些部分到达浏览器时都一直分离使得浏览器在从服务器获取HTML时有了前所未有的灵活性。

进一步了解Web浏览器

对于一些Web程序员来说，在前文阅读到的所有内容可能是对您在Web开发过程中角色的滑稽讲述。

但说到浏览器的行为，许多最能干的Web设计人员和开发人员通常都没有意识到“内幕”的实际状况。

我将在本节重点进行讲述。

不要担心，代码很快就到，但是要克制您编码的急躁心情，因为真正了解Web浏览器的确切行为对于您的代码正确工作是非常关键的。

文本标记的缺点

正如文本标记对于设计人员和页面创建者具有惊人的优点之外，它对于浏览器也具有相当出奇的缺点。

具体来说，浏览器很难直接将文本标记可视地表示给用户（详细信息请参阅 有关标记的一些其他想法）。

考虑下列常见的浏览器任务：

∙基于元素类型、类、ID及其在HTML文档中的位置，将CSS样式（通常来自外部文件中的多个样式表）应用于标记。

∙基于JavaScript代码（通常位于外部文件）将样式和格式应用于HTML文档的不同部分。

∙基于JavaScript代码更改表单字段的值。

∙基于JavaScript代码，支持可视效果，比如图像翻转和图像交换。

复杂性并不在于编码这些任务；其中每件事都是相当容易的。

复杂性来自实际实现请求动作的浏览器。

如果标记存储为文本，比如，想要在 center-text 类的 p 元素中输入文本（text-align:

center），如何实现呢？

∙将内联样式添加到文本吗？

∙将样式应用到浏览器中的HTML文本，并只保持内容居中或不居中？

∙应用无样式的HTML，然后事后应用格式？

这些非常困难的问题是如今很少有人编写浏览器的原因。

（编写浏览器的人应该接受最由衷的感谢）

无疑，纯文本不是存储浏览器HTML的好办法，尽管文本是获取页面标记最好的解决方案。

如果加上JavaScript 更改 页面结构的能力，事情就变得有些微妙了。

浏览器应该将修改过的结构重新写入磁盘吗？

如何才能保持文档的最新版本呢？

无疑，文本不是答案。

它难以修改，为其应用样式和行为很困难，与今天Web页面的动态本质在根本上相去甚远。

求助于树视图

这个问题的答案（至少是由当今Web浏览器选择的答案）是使用树结构来表示HTML。

参见 清单1，这是一个表示为本文标记的相当简单又无聊的HTML页面。

清单1.文本标记中的简单HTML页面

Trees,trees,everywhere

Welcometoareallyboringpage.

浏览器接受该页面并将之转换为树形结构，如图1所示。

图1.清单1的树视图

为了保持本文的进度，我做了少许简化。

DOM或XML方面的专家会意识到空白对于文档文本在Web浏览器树结构中表示和分解方式的影响。

肤浅的了解只会使事情变得模棱两可，所以如果想弄清空白的影响，那最好不过了；如果不想的话，那可以继续读下去，不要考虑它。

当它成为问题时，那时您就会明白您需要的一切。

除了实际的树背景之外，可能会首先注意到树中的一切是以最外层的HTML包含元素，即 html 元素开始的。

使用树的比喻，这叫做根元素。

所以即使这是树的底层，当您查看并分析树的时候，我也通常以此开始。

如果它确实奏效，您可以将整个树颠倒一下，但这确实有些拓展了树的比喻。

从根流出的线表示不同标记部分之间的关系。

head 和 body 元素是 html 根元素的孩子；title 是 head 的孩子，而文本“Trees,trees,everywhere”是 title 的孩子。

整个树就这样组织下去，直到浏览器获得与 图1 类似的结构。

一些附加术语

为了沿用树的比喻，head 和 body 被叫做 html 的分支（branches）。

叫分支是因为它们有自己的孩子。

当到达树的末端时，您将进入主要的文本，比如“Trees,trees,everywhere”和“really”；这些通常称为叶子，因为它们没有自己的孩子。

您不需要记住所有这些术语，当您试图弄清楚特定术语的意思时，只要想像一下树结构就容易多了。

对象的值

既然了解了一些基本的术语，现在应该关注一下其中包含元素名称和文本的小矩形了（图1）。

每个矩形是一个对象；浏览器在其中解决一些文本问题。

通过使用对象来表示HTML文档的每一部分，可以很容易地更改组织、应用样式、允许JavaScript访问文档，等等。

对象类型和属性

标记的每个可能类型都有自己的对象类型。

例如，HTML中的元素用 Element 对象类型表示。

文档中的文本用 Text 类型表示，属性用 Attribute 类型表示，以此类推。

所以Web浏览器不仅可以使用对象模型来表示文档（从而避免了处理静态文本），还可以用对象类型立即辨别出某事物是什么。

HTML文档被解析并转换为对象集合，如 图1 所示，然后尖括号和转义序列（例如，使用 < 表示 <，使用 > 表示 >）等事物不再是问题了。

这就使得浏览器的工作（至少在解析输入HTML之后）变得更容易。

弄清某事物究竟是元素还是属性并确定如何处理该类型的对象，这些操作都十分简单了。

通过使用对象，Web浏览器可以更改这些对象的属性。

例如，每个元素对象具有一个父元素和一系列子元素。

所以添加新的子元素或文本只需要向元素的子元素列表中添加一个新的子元素。

这些对象还具有 style 属性，所以快速更改元素或文本段的样式非常简单。

例如，要使用JavaScript更改 div 的高度，如下所示：

someDiv.style.height="300px";

换句话说，Web浏览器使用对象属性可以非常容易地更改树的外观和结构。

将之比作浏览器在内部将页面表示为文本时必须进行的复杂事情，每次更改属性或结构都需要浏览器重新编写静态文件、重新解析并在屏幕上重新显示。

有了对象，所有这一切都解决了。

现在，花点时间展开一些HTML文档并用树将其勾画出来。

尽管这看起来是个不寻常的请求（尤其是在包含极少代码的这样一篇文章中），如果您希望能够操纵这些树，那么需要熟悉它们的结构。

在这个过程中，可能会发现一些古怪的事情。

比如，考虑下列情况：

∙属性发生了什么？

∙分解为元素（比如 em 和 b）的文本呢？

∙结构不正确（比如当缺少结束 p 标记时）的HTML呢？

一旦熟悉这些问题之后，就能更好地理解下面几节了。

严格有时是好事

如果尝试刚提到的练习I，您可能会发现标记的树视图中存在一些潜在问题（如果不练习的话，那就听我说吧！

）。

事实上，在 清单1 和 图1 中就会发现一些问题，首先看 p 元素是如何分解的。

如果您问通常的Web开发人员“p 元素的文本内容是什么”，最常见的答案将是“WelcometoareallyboringWebpage.”。

如果将之与图1做比较，将会发现这个答案（虽然合乎逻辑）是根本不正确的。

实际上，p 元素具有三个 不同的子对象，其中没有一个包含完整的“WelcometoareallyboringWebpage.”文本。

您会发现文本的一部分，比如“Welcometoa”和“boringWebpage”，但不是全部。

为了理解这一点，记住标记中的任何内容都必须转换为某种类型的对象。

此外，顺序无关紧要！

如果浏览器显示正确的对象，但显示顺序与您在HTML中提供的顺序不同，那么您能想像出用户将如何响应Web浏览器吗？

段落夹在页面标题和文章标题中间，而这不是您自己组织文档时的样式呢？

很显然，浏览器必须保持元素和文本的顺序。

在本例中，p 元素有三个不同部分：

∙em 元素之前的文本

∙em 元素本身

∙em 元素之后的文本

如果将该顺序打乱，可能会把重点放在文本的错误部分。

为了保持一切正常，p 元素有三个子对象，其顺序是在 清单1 的HTML中显示的顺序。

而且，重点文本“really” 不是 p 的子元素；而是 p 的子元素 em 的子元素。

理解这一概念非常重要。

尽管“really”文本将可能与其他 p 元素文本一起显示，但它仍是 em 元素的直接子元素。

它可以具有与其他 p文本不同的格式，而且可以独立于其他文本到处移动。

要将之牢记在心，试着用图表示清单 2 和 3 中的HTML，确保文本具有正确的父元素（而不管文本最终会如何显示在屏幕上）。

清单2.带有巧妙元素嵌套的标记

Paycloseattention,OK?

清单3.更巧妙的元素嵌套