四天学会ajax第四天.docx

《四天学会ajax第四天.docx》由会员分享，可在线阅读，更多相关《四天学会ajax第四天.docx（8页珍藏版）》请在冰豆网上搜索。

四天学会ajax第四天

[四天学会ajax]学习Ajax教程第四天，利用DOM进行Web响应

在HTML的外部文件中一样，标记的组织与其样式、格式和行为是分离的。

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

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

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

文本标记的优点

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

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

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

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

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

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

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

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

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

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

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

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

关于标记的其他想法

纯文本编辑：

是对是错？

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

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

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

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

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

网络上的文本：

好东西

免费网店开店培训教程：

电信用户：

网通等用户：

已经说过，文本是文档的最好媒体，比如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页面

 

Trees,trees,everywhere

Welcometoareallyboringpage.

浏览器接受该页面并将之转换为树形结构，如图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.带有巧妙元素嵌套的标记