Ajax 完整教程 (转)(11)_H5之家 - 中国HTML5教程资源分享第一站

已经说过，文本是文档的最好媒体，比如 HTML 或 CSS，在网络上被千百次地传输。当我说浏览器表示文本很难时，是特指将文本转换为用户查看的可视图形页面。这与浏览器实际上如何从 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 页面

<html>
<head>
  <title>Trees, trees, everywhere</title>
</head>
<body>
  <h1>Trees, trees, everywhere</h1>
  <p>Welcome to a <em>really</em> boring page.</p>
  <div>
Come again soon.
<img src="come-again.gif" />
  </div>
</body>
</html>
浏览器接受该页面并将之转换为树形结构，如图 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 元素的文本内容是什么”，最常见的答案将是 “Welcome to a really boring Web page.”。如果将之与图 1 做比较，将会发现这个答案（虽然合乎逻辑）是根本不正确的。

实际上，p 元素具有三个不同的子对象，其中没有一个包含完整的 “Welcome to a really boring Web page.” 文本。您会发现文本的一部分，比如 “Welcome to a ” 和 “ boring Web page”，但不是全部。为了理解这一点，记住标记中的任何内容都必须转换为某种类型的对象。

此外，顺序无关紧要！如果浏览器显示正确的对象，但显示顺序与您在 HTML 中提供的顺序不同，那么您能想像出用户将如何响应 Web 浏览器吗？段落夹在页面标题和文章标题中间，而这不是您自己组织文档时的样式呢？很显然，浏览器必须保持元素和文本的顺序。

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

·em 元素之前的文本
·em 元素本身
·em 元素之后的文本

如果将该顺序打乱，可能会把重点放在文本的错误部分。为了保持一切正常，p 元素有三个子对象，其顺序是在清单 1 的 HTML 中显示的顺序。而且，重点文本 “really” 不是p 的子元素；而是 p 的子元素 em 的子元素。

理解这一概念非常重要。尽管 “really” 文本将可能与其他 p 元素文本一起显示，但它仍是 em 元素的直接子元素。它可以具有与其他 p 文本不同的格式，而且可以独立于其他文本到处移动。

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

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

<html>
<head>
  <title>This is a little tricky</title>
</head>
<body>
  <h1>Pay <u>close</u> attention, OK?</h1>
  <div>
<p>This p really isn't <em>necessary</em>, but it makes the
   <span>structure <i>and</i> the organization</span>
   of the page easier to keep up with.</p>
  </div>
</body>
</html>