📄 掌握 ajax，第 4 部分 利用 dom 进行 web 响应.htm
字号:
border=0><TBODY>
<TR>
<TD width=10><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 进行 Web 响应.files/c.gif" width=10></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
<TBODY>
<TR>
<TD bgColor=#eeeeee><A
name=additional><B>关于标记的其他想法</B></A><BR>
<P><B>纯文本编辑：是对是错？</B><BR>纯文本是存储标记的理想选择，但是不适合<I>编辑</I>
标记。大行其道的是使用 IDE，比如 Macromedia DreamWeaver 或更强势点的
Microsoft® FrontPage®，来操作 Web 页面标记。这些环境通常提供快捷方式和帮助来创建
Web 页面，尤其是在使用 CSS 和 JavaScript
时，二者都来自实际页面标记以外的文件。许多人仍偏爱好用古老的记事本或
vi（我承认我也是其中一员），这并不要紧。不管怎样，最终结果都是充满标记的文本文件。</P>
<P><B>网络上的文本：好东西</B><BR>已经说过，文本是文档的最好媒体，比如 HTML 或
CSS，在网络上被千百次地传输。当我说浏览器表示文本很难时，是特指将文本转换为用户查看的可视图形页面。这与浏览器实际上如何从
Web
浏览器检索页面没有关系；在这种情况下，文本仍然是最佳选择。</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P><A name=N100FB><SPAN class=smalltitle>文本标记的优点</SPAN></A></P>
<P>在讨论 Web 浏览器之前，值得考虑一下为什么纯文本<I>绝对</I> 是存储 HTML 的最佳选择（有关详细信息，请参阅 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#additional">有关标记的一些其他想法</A>）。不考虑优缺点，只是回忆一下在每次查看页面时
HTML 是通过网络发送到 Web
浏览器的（为了简洁，不考虑高速缓存等）。真是再没有比传递文本再有效的方法了。二进制对象、页面图形表示、重新组织的标记块等等，所有这一切都比纯文本文件通过网络传递要更困难。</P>
<P>此外，浏览器也为此增光添彩。今天的浏览器允许用户更改文本大小、按比例伸缩图像、下载页面的 CSS 或
JavaScript（大多数情况），甚至更多，这完全排除了将任何类型的页面图形表示发送到浏览器上。但是，浏览器需要原
HTML，这样它才能在浏览器中对页面应用任何处理，而不是信任浏览器去处理该任务。同样地，将 CSS 从 JavaScript 分离和将
CSS 从 HTML 标记分离要求一种容易分离的格式。文本文件又一次成为该任务的最好方法。</P>
<P>最后但同样重要的一点是，记住，新标准（比如 HTML 4.01 与 XHTML 1.0 和
1.1）承诺将内容（页面中的数据）与表示和样式（通常由 CSS 应用）分离。如果程序员要将 HTML 与 CSS
分离，然后强制浏览器检索粘结页面各部分的一些页面表示，这会失去这些标准的多数优点。保持这些部分到达浏览器时都一直分离使得浏览器在从服务器获取
HTML 时有了前所未有的灵活性。</P>
<P><A name=N10111><SPAN class=atitle>进一步了解 Web 浏览器</SPAN></A></P>
<P>对于一些 Web 程序员来说，在前文阅读到的所有内容可能是对您在 Web
开发过程中角色的滑稽讲述。但说到浏览器的行为，许多最能干的 Web 设计人员和开发人员通常都没有意识到 “内幕”
的实际状况。我将在本节重点进行讲述。不要担心，代码很快就到，但是要克制您编码的急躁心情，因为真正了解 Web
浏览器的确切行为对于您的代码正确工作是非常关键的。</P>
<P><A name=N1011B><SPAN class=smalltitle>文本标记的缺点</SPAN></A></P>
<P>正如文本标记对于设计人员和页面创建者具有惊人的优点之外，它对于浏览器也具有相当出奇的缺点。具体来说，浏览器很难直接将文本标记可视地表示给用户（详细信息请参阅
<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#additional">有关标记的一些其他想法</A>）。考虑下列常见的浏览器任务：</P>
<UL>
<LI>基于元素类型、类、ID 及其在 HTML 文档中的位置，将 CSS 样式（通常来自外部文件中的多个样式表）应用于标记。
<LI>基于 JavaScript 代码（通常位于外部文件）将样式和格式应用于 HTML 文档的不同部分。
<LI>基于 JavaScript 代码更改表单字段的值。
<LI>基于 JavaScript 代码，支持可视效果，比如图像翻转和图像交换。 </LI></UL>
<P>复杂性并不在于编码这些任务；其中每件事都是相当容易的。复杂性来自实际实现请求动作的浏览器。如果标记存储为文本，比如，想要在
<CODE>center-text</CODE> 类的 <CODE>p</CODE> 元素中输入文本
(<CODE>text-align: center</CODE>)，如何实现呢？</P>
<UL>
<LI>将内联样式添加到文本吗？
<LI>将样式应用到浏览器中的 HTML 文本，并只保持内容居中或不居中？
<LI>应用无样式的 HTML，然后事后应用格式？ </LI></UL>
<P>这些非常困难的问题是如今很少有人编写浏览器的原因。（编写浏览器的人应该接受最由衷的感谢）</P>
<P>无疑，纯文本不是存储浏览器 HTML 的好办法，尽管文本是获取页面标记最好的解决方案。如果加上 JavaScript
<I>更改</I> 页面结构的能力，事情就变得有些微妙了。浏览器应该将修改过的结构重新写入磁盘吗？如何才能保持文档的最新版本呢？</P>
<P>无疑，文本不是答案。它难以修改，为其应用样式和行为很困难，与今天 Web 页面的动态本质在根本上相去甚远。</P>
<P><A name=N1015E><SPAN class=smalltitle>求助于树视图</SPAN></A></P>
<P>这个问题的答案（至少是由当今 Web 浏览器选择的答案）是使用树结构来表示 HTML。参见 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing1">清单
1</A>，这是一个表示为本文标记的相当简单又无聊的 HTML 页面。</P><BR><BR><A
name=listing1><B>清单 1. 文本标记中的简单 HTML 页面</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<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>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>浏览器接受该页面并将之转换为树形结构，如图 1 所示。</P><BR><BR><A name=fig1><B>图 1. 清单 1
的树视图</B></A><BR><IMG height=478 alt="清单 1 的树视图"
src="掌握 Ajax，第 4 部分 利用 DOM 进行 Web 响应.files/tree.gif" width=422> <BR>
<P>为了保持本文的进度，我做了少许简化。DOM 或 XML 方面的专家会意识到空白对于文档文本在 Web
浏览器树结构中表示和分解方式的影响。肤浅的了解只会使事情变得模棱两可，所以如果想弄清空白的影响，那最好不过了；如果不想的话，那可以继续读下去，不要考虑它。当它成为问题时，那时您就会明白您需要的一切。</P>
<P>除了实际的树背景之外，可能会首先注意到树中的一切是以最外层的 HTML 包含元素，即 <CODE>html</CODE>
元素开始的。使用树的比喻，这叫做<I>根元素</I>。所以即使这是树的底层，当您查看并分析树的时候，我也通常以此开始。如果它确实奏效，您可以将整个树颠倒一下，但这确实有些拓展了树的比喻。</P>
<P>从根流出的线表示不同标记部分之间的关系。<CODE>head</CODE> 和 <CODE>body</CODE> 元素是
<CODE>html</CODE> 根元素的<I>孩子</I>；<CODE>title</CODE> 是
<CODE>head</CODE> 的孩子，而文本 “Trees, trees, everywhere” 是
<CODE>title</CODE> 的孩子。整个树就这样组织下去，直到浏览器获得与 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">图
1</A> 类似的结构。</P>
<P><A name=N101B6><SPAN class=smalltitle>一些附加术语</SPAN></A></P>
<P>为了沿用树的比喻，<CODE>head</CODE> 和 <CODE>body</CODE> 被叫做
<CODE>html</CODE>
的<I>分支（branches）</I>。叫分支是因为它们有自己的孩子。当到达树的末端时，您将进入主要的文本，比如 “Trees,
trees, everywhere” 和
“really”；这些通常称为<I>叶子</I>，因为它们没有自己的孩子。您不需要记住所有这些术语，当您试图弄清楚特定术语的意思时，只要想像一下树结构就容易多了。</P>
<P><A name=N101D1><SPAN class=atitle>对象的值</SPAN></A></P>
<P>既然了解了一些基本的术语，现在应该关注一下其中包含元素名称和文本的小矩形了（<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">图
1</A>）。每个矩形是一个对象；浏览器在其中解决一些文本问题。通过使用对象来表示 HTML
文档的每一部分，可以很容易地更改组织、应用样式、允许 JavaScript 访问文档，等等。</P>
<P><A name=N101DF><SPAN class=smalltitle>对象类型和属性</SPAN></A></P>
<P>标记的每个可能类型都有自己的对象类型。例如，HTML 中的元素用 <CODE>Element</CODE>
对象类型表示。文档中的文本用 <CODE>Text</CODE> 类型表示，属性用 <CODE>Attribute</CODE>
类型表示，以此类推。</P>
<P>所以 Web 浏览器不仅可以使用对象模型来表示文档（从而避免了处理静态文本），还可以用对象类型立即辨别出某事物是什么。HTML
文档被解析并转换为对象集合，如 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">图
1</A> 所示，然后尖括号和转义序列（例如，使用 <CODE><</CODE> 表示 <CODE><</CODE>，使用
<CODE>></CODE> 表示 <CODE>></CODE>）等事物不再是问题了。这就使得浏览器的工作（至少在解析输入
HTML 之后）变得更容易。弄清某事物究竟是元素还是属性并确定如何处理该类型的对象，这些操作都十分简单了。</P>
<P>通过使用对象，Web
浏览器可以更改这些对象的属性。例如，每个元素对象具有一个父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一个新的子元素。这些对象还具有
<CODE>style</CODE> 属性，所以快速更改元素或文本段的样式非常简单。例如，要使用 JavaScript 更改
<CODE>div</CODE> 的高度，如下所示：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>someDiv.style.height = "300px";
</PRE></TD></TR></TBODY></TABLE><BR>
<P>换句话说，Web
浏览器使用对象属性可以非常容易地更改树的外观和结构。将之比作浏览器在内部将页面表示为文本时必须进行的复杂事情，每次更改属性或结构都需要浏览器重新编写静态文件、重新解析并在屏幕上重新显示。有了对象，所有这一切都解决了。</P>
<P>现在，花点时间展开一些 HTML
文档并用树将其勾画出来。尽管这看起来是个不寻常的请求（尤其是在包含极少代码的这样一篇文章中），如果您希望能够操纵这些树，那么需要熟悉它们的结构。</P>
<P>在这个过程中，可能会发现一些古怪的事情。比如，考虑下列情况：</P>
<UL>
<LI>属性发生了什么？
<LI>分解为元素（比如 <CODE>em</CODE> 和 <CODE>b</CODE>）的文本呢？
<LI>结构不正确（比如当缺少结束 <CODE>p</CODE> 标记时）的 HTML 呢？ </LI></UL>
<P>一旦熟悉这些问题之后，就能更好地理解下面几节了。</P>
<P><A name=N1023F><SPAN class=smalltitle>严格有时是好事</SPAN></A></P>
<P>如果尝试刚提到的练习 I，您可能会发现标记的树视图中存在一些潜在问题（如果不练习的话，那就听我说吧！）。事实上，在 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing1">清单
1</A> 和 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">图
1</A> 中就会发现一些问题，首先看 <CODE>p</CODE> 元素是如何分解的。如果您问通常的 Web 开发人员
“<CODE>p</CODE> 元素的文本内容是什么”，最常见的答案将是 “Welcome to a really boring Web
page.”。如果将之与图 1 做比较，将会发现这个答案（虽然合乎逻辑）是根本不正确的。</P>
<P>实际上，<CODE>p</CODE> 元素具有<I>三个</I> 不同的子对象，其中没有一个包含完整的 “Welcome to a
really boring Web page.” 文本。您会发现文本的一部分，比如 “Welcome to a ” 和 “ boring
Web page”，但不是全部。为了理解这一点，记住标记中的任何内容都必须转换为某种类型的对象。</P>
<P>此外，顺序无关紧要！如果浏览器显示正确的对象，但显示顺序与您在 HTML 中提供的顺序不同，那么您能想像出用户将如何响应 Web
浏览器吗？段落夹在页面标题和文章标题中间，而这不是您自己组织文档时的样式呢？很显然，浏览器必须保持元素和文本的顺序。 </P>
<P>在本例中，<CODE>p</CODE> 元素有三个不同部分： </P>
<UL>
<LI><CODE>em</CODE> 元素之前的文本
<LI><CODE>em</CODE> 元素本身
<LI><CODE>em</CODE> 元素之后的文本 </LI></UL>
<P>如果将该顺序打乱，可能会把重点放在文本的错误部分。为了保持一切正常，<CODE>p</CODE> 元素有三个子对象，其顺序是在
<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing1">清单
1</A> 的 HTML 中显示的顺序。而且，重点文本 “really” <I>不是</I> <CODE>p</CODE>
的子元素；而是 <CODE>p</CODE> 的子元素 <CODE>em</CODE> 的子元素。</P>
<P>理解这一概念非常重要。尽管 “really” 文本将可能与其他 <CODE>p</CODE> 元素文本一起显示，但它仍是
<CODE>em</CODE> 元素的直接子元素。它可以具有与其他 <CODE>p</CODE>
文本不同的格式，而且可以独立于其他文本到处移动。</P>
<P>要将之牢记在心，试着用图表示清单 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing2">2</A>
和 <A
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -