快捷搜索:

Ajax 完整教程(4)

第 4 页 使用 DOM 进行 Web 相应

法度榜样员(应用后端利用法度榜样)和 Web 法度榜样员(编写 HTML、CSS 和 JavaScript)之间的分水岭是长久存在的。然则,Document Object Model (DOM) 增补了这个缝隙,使得在后端应用 XML 同时在前端应用 HTML 切实可行,并成为极其有效的对象。在本文中,Brett McLaughlin 先容了 Document Object Model,解释它在 Web 页面中的利用,并开始掘客其在 JavaScript 中的用途。

与许多 Web 法度榜样员一样,您可能应用过 HTML。HTML 是法度榜样员开始与 Web 页面打交道的要领;HTML 平日是他们完成利用法度榜样或站点前的着末一步——调剂一些结构、颜色或样式。不过,虽然常常应用 HTML,但对付 HTML 转到浏览器出现在屏幕上时到底发生了什么,人们普遍存在误解。在我阐发您觉得可能发生的工作及其可能差错的缘故原由之前,我盼望您对设计和办事 Web 页面时涉及的历程一览无余:

1、一些人(平日是您!)在文本编辑器或 IDE 中创建 HTML。

2、然后您将 HTML 上载到 Web 办事器,例如 Apache HTTPD,并将其公开在 Internet 或 intranet 上。

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

4、用户的浏览器向您的办事器哀求 HTML。

5、浏览器将从办事器接管到的页面以图形和文本要领出现;用户看到并激活 Web 页面。

这看起来异常根基,但工作很快会变得有趣起来。事实上,步骤 4 和步骤 5 之间发生的伟大年夜数量的 “添补物(stuff)” 便是本文的焦点。术语 “添补物” 也十分适用,由于多半法度榜样员从来没有真正斟酌过当用户浏览器哀求显示标记时到底在标记身上发生了什么。

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

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

·JavaScript 呢?它也平日位于外部文件中。

·浏览器若何处置惩罚这些项,假如将事故处置惩罚法度榜样、函数和样式映射到该文本标记?

实践证实,所有这些问题的谜底都是 Document Object Model。是以,废话少说,直接钻研 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 变动元素或文本的样式,但实际变动您的标记所部署的组织却加倍有趣。

只要切记您的标记只为您的页面供给组织、框架,您就能立于不败之地。再提高一小步,您就会明白浏览器是若何吸收所有的文本组织并将其转变为超级有趣的一些器械的,即一组工具,此中每个工具都可被变动、添加或删除。

文本标记的优点

在评论争论 Web 浏览器之前,值得斟酌一下为什么纯文本绝对 是存储 HTML 的最佳选择(有关具体信息,请参阅 有关标记的一些其他设法主见)。不斟酌优毛病,只是回忆一下在每次查看页面时 HTML 是经由过程收集发送到 Web 浏览器的(为了简洁,不斟酌高速缓存等)。真是再没有比通报文本再有效的措施了。二进制工具、页面图形表示、从新组织的标记块等等,所有这统统都比纯文本文件经由过程收集通报要更艰苦。

此外,浏览器也为此增光添彩。本日的浏览器容许用户变动文今大年夜小、按比例伸缩图像、下载页面的 CSS 或 JavaScript(大年夜多半环境),以致更多,这完全扫除了将任何类型的页面图形表示发送到浏览器上。然则,浏览器必要原 HTML,这样它才能在浏览器中对页面利用任何处置惩罚,而不是相信浏览器去处置惩罚该义务。同样地,将 CSS 从 JavaScript 分离和将 CSS 从 HTML 标记分离要求一种轻易分离的款式。文本文件又一次成为该义务的最好措施。

着末但同样紧张的一点是,记着,新标准(比如 HTML 4.01 与 XHTML 1.0 和 1.1)允诺将内容(页面中的数据)与表示和样式(平日由 CSS 利用)分离。假如法度榜样员要将 HTML 与 CSS 分离,然后强制浏览器检索粘结页面各部分的一些页面表示,这会掉去这些标准的多半优点。维持这些部分到达浏览器时都不停分离使得浏览器在从办事器获取 HTML 时有了前所未有的机动性。

关于标记的其他设法主见

纯文本编辑:是对是错?

纯文本是存储标记的抱负选择,然则不得当编辑 标记。大年夜行其道的是应用 IDE,比如 Macromedia DreamWeaver 或更强势点的 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 页面

StepsProcess

1

Figure out the root element.

2

Deal with the head first,

as it's usually easy.

3

Work through the body.

Just take your time.

This link is not active, but if it were, the answers

to this would

be there. But do the exercise anyway!

在本文末的 GIF 文件 图 2 中的 tricky-solution.gif 和 图 3 中的 trickier-solution.gif 中将会找到这些演习的谜底。不要偷看,先花些光阴自动解答一下。这样能赞助您理解组织树时利用的规则有多么严格,并真正赞助您掌握 HTML 及其树布局。

属性呢?

当您试图弄清楚若何处置惩罚属性时,是否碰到一些问题呢?前已说起,属性确凿具有自己的工具类型,但属性确凿不是显示它的元素的子元素,嵌套元素和文本不在同一属性 “级别”,您将留意到,清单 2 和 3 中演习的谜底没有显示属性。

属性事实上存储在浏览器应用的工具模型中,但它们有一些特殊环境。每个元素都有可用属性的列表,且与子工具列表是分离的。以是 div 元素可能有一个包孕属性 “id” 和另一个属性 “class” 的列表。

记着,元素的属性必须具有惟一的名称,也便是说,一个元素不能有两个 “id” 或两个 “class” 属性。这使得列表易于掩护和造访。鄙人一篇文章将会看到,您可以简单调用诸如 getAttribute("id") 的措施来按名称获取属性的值。还可以用相似的措施调用来添加属性或设置(重置)现有属性的值。

值得指出的是,属性名的惟一性使得该列表不合于子工具列表。p 元素可以有多个 em 元素,以是子工具列表可以包孕多个重复项。只管子项列表和属性列表的操作要领相似,但一个可以包孕重复项(工具的子项),而一个不能(元素工具的属性)。着末,只有元素具有属性,以是文本工具没有用于存储属性的附加列表。

杂乱的 HTML

在继承之前,谈到浏览器若何将标记转换为树表示,还有一个主题值得探究,即浏览器若何处置惩罚不是款式优越的标记。款式优越 是 XML 广泛应用的一个术语,有两个基础意思:

·每个开始标记都有一个与之匹配的停止标记。以是每个

在文档中与

匹配,每个

匹配,等等。

·最里面的开始标记与最里面的停止标记相匹配,然后次里面的开始标记与次里面的停止标记相匹配,依此类推。以是 bold and italics 是分歧法的,由于最里面的开始标记与最里面的停止标记匹配欠妥。要使之款式优越,要么 切换开始标记顺序,要么 切换停止标记顺序。(假如两者都切换,则仍会呈现问题)。

深入钻研这两条规则。这两条规则不仅简化了文档的组织,还打消了不定性。是否应先利用粗体后利用斜体?或恰好相反?假如感觉这种顺序和不定性不是大年夜问题,那么请记着,CSS 容许规则覆盖其他规则,以是,例如,假如 b 元素中文本的字体不合于 i 元素中的字体,则款式的利用顺序将变得异常紧张。是以,HTML 的款式优越性有着举足轻重的感化。

假如浏览器收到了不是款式优越的文档,它只会尽力而为。获得的树布局在最好环境下将是作者盼望的原始页面的近似,最坏环境下将面貌全非。假如您曾将页面加载到浏览器中后看到完全出乎料想的结果,您可能在看到浏览器结果时会猜想您的布局应该若何,并沮丧地继承事情。当然,搞定这个问题相称简单:确保文档是款式优越的!假如不清楚若何编写标准化的 HTML,请咨询 参考资料 得到赞助。

DOM 简介

到今朝为止,您已经知道浏览器将 Web 页面转换为工具表示,可能您以致会猜想,工具表示是 DOM 树。DOM 表示 Document Object Model,是一个规范,可从 World Wide Web Consortium (W3C) 得到(您可以参阅 参考资料 中的一些 DOM 相关链接)。

但更紧张的是,DOM 定义了工具的类型和属性,从而容许浏览器表示标记。(本系列下一篇文章将专门讲述在 JavaScript 和 Ajax 代码中应用 DOM 的规范。)

文档工具

首先,必要造访工具模型本身。这异常轻易;要在运行于 Web 页面上的任何 JavaScript 代码中应用内置 document 变量,可以编写如下代码:

var domTree = document;

当然,该代码本身没什么用,但它演示了每个 Web 浏览器使得 document 工具可用于 JavaScript 代码,并演示了工具表示标记的完备树(图 1)。

每项都是一个节点

显然,document 工具很紧张,但这只是开始。在进一步深入之前,必要进修另一个术语:节点。您已经知道标记的每个部分都由一个工具表示,但它不光是一个随意率性的工具,它是特定类型的工具,一个 DOM 节点。更特定的类型,比如文本、元素和属性,都承袭自这个基础的节点类型。以是可以有文本节点、元素节点和属性节点。

假如已经有很多 JavaScript 编程履历,那您可能已经在应用 DOM 代码了。假如到今朝为止您不停在跟踪本 Ajax 系列,那么现在您必然 应用 DOM 代码有一段光阴了。例如,代码行 var number = document.getElementById("phone").value; 应用 DOM 查找特定元素,然后检索该元素的值(在本例中是一个表单字段)。以是纵然您没故意识到这一点,但您每次将 document 键入 JavaScript 代码时都邑应用 DOM。

具体解释已经学过的术语,DOM 树是工具的树,但更详细地说,它是节点 工具的树。在 Ajax 利用法度榜样中或任何其他 JavaScript 中,可以应用这些节点孕育发生下列效果,比如移除元素及其内容,凸起显示特定文本,或添加新图像元素。由于都发生在客户端(运行在 Web 浏览器中的代码),以是这些效果急速发生,而不与办事器通信。最遣散果平日是利用法度榜样感到起来相应更快,由于当哀求转向办事器时以及解释响适时,Web 页面上的内容变动不会呈现长光阴的逗留。

在多半编程说话中,必要进修每种节点类型的实际工签字称,进修可用的属性,并弄清楚类型和强制转换;但在 JavaScript 中这都不是必需的。您可以只创建一个变量,并为它分配您盼望的工具(正如您已经看到的):

var domTree = document;

var phoneNumberElement = document.getElementById("phone");

var phoneNumber = phoneNumberElement.value;

没有类型,JavaScript 根据必要创建变量并为其分配精确的类型。结果,从 JavaScript 中应用 DOM 变得微不够道(将来有一篇文章会专门讲述与 XML 相关的 DOM,那时将加倍奇妙)。

停止语

在这里,我要给您留一点悬念。显然,这并非是对 DOM 完全详尽的阐明;事实上,本文不过是 DOM 的简介。DOM 的内容要远远多于我本日先容的这些!

本系列的下一篇文章将扩展这些不雅点,并深入探究若何在 JavaScript 中应用 DOM 来更新 Web 页面、快速变动 HTML 并为您的用户创建更交互的体验。在后面专门讲述在 Ajax 哀求中应用 XML 的文章中,我将再次返回来评论争论 DOM。以是要认识 DOM,它是 Ajax 利用法度榜样的一个主要部分。

此时,深入懂得 DOM 将十分简单,比如具体设计若何在 DOM 树中移动、得到元素和文本的值、遍历节点列表,等等,但这可能会让您有这种印象,即 DOM 是关于代码的,而事实上并非如斯。

在涉猎下一篇文章之前,试着思虑一下树布局并用一些您自己的 HTML 实践一下,以查看 Web 浏览器是若何将 HTML 转换为标记的树视图的。此外,思虑一下 DOM 树的组织,并用本文先容的特殊环境实践一下:属性、有元素混杂在此中的文本、没有 文本内容的元素(比如 img 元素)。

假如踏实掌握了这些观点,然后进修了 JavaScript 和 DOM 的语法(下一篇文章),则会使得相应更为轻易。

而且不要忘了,这里有清单 2 和 3 的谜底,此中还包孕了示例代码!

图 2. 清单 2 的谜底

图 3. 清单 3 的谜底

您可能还会对下面的文章感兴趣: