第 4 部分 利用 DOM 进行 Web 响应文档格式.docx
《第 4 部分 利用 DOM 进行 Web 响应文档格式.docx》由会员分享，可在线阅读，更多相关《第 4 部分 利用 DOM 进行 Web 响应文档格式.docx（16页珍藏版）》请在冰点文库上搜索。
您绝对控制的是Web页面的结构。
您的标记不可更改，用户就不能乱弄；
他们的浏览器只能从您的Web服务器检索标记并显示它（虽然样式更符合用户的品味而不是您自己的品味）。
但页面组织，不管是在该段落内还是在其他分区，都只由您单独决定。
要是想实际更改您的页面（这是大多数Ajax应用程序所关注的），您操作的是页面的结构。
尽管很容易更改一段文本的颜色，但在现有页面上添加文本或整个区段要难得多。
不管用户如何设计该区段的样式，都是由您控制页面本身的组织。
标记做什么
一旦意识到您的标记是真正与组织相关的，您就会对它另眼相看了。
不会认为
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
类的
元素中输入文本（text-align:
center），如何实现呢？
∙将内联样式添加到文本吗？
∙将样式应用到浏览器中的HTML文本，并只保持内容居中或不居中？
∙应用无样式的HTML，然后事后应用格式？
这些非常困难的问题是如今很少有人编写浏览器的原因。
（编写浏览器的人应该接受最由衷的感谢）
无疑，纯文本不是存储浏览器HTML的好办法，尽管文本是获取页面标记最好的解决方案。
如果加上JavaScript
更改
页面结构的能力，事情就变得有些微妙了。
浏览器应该将修改过的结构重新写入磁盘吗？
如何才能保持文档的最新版本呢？
无疑，文本不是答案。
它难以修改，为其应用样式和行为很困难，与今天Web页面的动态本质在根本上相去甚远。
求助于树视图
这个问题的答案（至少是由当今Web浏览器选择的答案）是使用树结构来表示HTML。
参见
清单1，这是一个表示为本文标记的相当简单又无聊的HTML页面。
清单1.文本标记中的简单HTML页面
<
html>
<
head>
title>
Trees,trees,everywhere<
/title>
/head>
body>
h1>
/h1>
p>
Welcometoa<
em>
really<
/em>
boringpage.<
/p>
div>
Comeagainsoon.
imgsrc="
come-again.gif"
/>
/div>
/body>
/html>
浏览器接受该页面并将之转换为树形结构，如图1所示。
图1.清单1的树视图
为了保持本文的进度，我做了少许简化。
DOM或XML方面的专家会意识到空白对于文档文本在Web浏览器树结构中表示和分解方式的影响。
肤浅的了解只会使事情变得模棱两可，所以如果想弄清空白的影响，那最好不过了；
如果不想的话，那可以继续读下去，不要考虑它。
当它成为问题时，那时您就会明白您需要的一切。
除了实际的树背景之外，可能会首先注意到树中的一切是以最外层的HTML包含元素，即
html
元素开始的。
使用树的比喻，这叫做根元素。
所以即使这是树的底层，当您查看并分析树的时候，我也通常以此开始。
如果它确实奏效，您可以将整个树颠倒一下，但这确实有些拓展了树的比喻。
从根流出的线表示不同标记部分之间的关系。
head
和
body
元素是
根元素的孩子；
title
是
的孩子，而文本“Trees,trees,everywhere”是
的孩子。
整个树就这样组织下去，直到浏览器获得与
图1
类似的结构。
一些附加术语
为了沿用树的比喻，head
被叫做
的分支（branches）。
叫分支是因为它们有自己的孩子。
当到达树的末端时，您将进入主要的文本，比如“Trees,trees,everywhere”和“really”；
这些通常称为叶子，因为它们没有自己的孩子。
您不需要记住所有这些术语，当您试图弄清楚特定术语的意思时，只要想像一下树结构就容易多了。
对象的值
既然了解了一些基本的术语，现在应该关注一下其中包含元素名称和文本的小矩形了（图1）。
每个矩形是一个对象；
浏览器在其中解决一些文本问题。
通过使用对象来表示HTML文档的每一部分，可以很容易地更改组织、应用样式、允许JavaScript访问文档，等等。
对象类型和属性
标记的每个可能类型都有自己的对象类型。
例如，HTML中的元素用
Element
对象类型表示。
文档中的文本用
Text
类型表示，属性用
Attribute
类型表示，以此类推。
所以Web浏览器不仅可以使用对象模型来表示文档（从而避免了处理静态文本），还可以用对象类型立即辨别出某事物是什么。
HTML文档被解析并转换为对象集合，如
所示，然后尖括号和转义序列（例如，使用
表示
，使用
>
）等事物不再是问题了。
这就使得浏览器的工作（至少在解析输入HTML之后）变得更容易。
弄清某事物究竟是元素还是属性并确定如何处理该类型的对象，这些操作都十分简单了。
通过使用对象，Web浏览器可以更改这些对象的属性。
例如，每个元素对象具有一个父元素和一系列子元素。
所以添加新的子元素或文本只需要向元素的子元素列表中添加一个新的子元素。
这些对象还具有
style
属性，所以快速更改元素或文本段的样式非常简单。
例如，要使用JavaScript更改
div
的高度，如下所示：
someDiv.style.height="
300px"
;
换句话说，Web浏览器使用对象属性可以非常容易地更改树的外观和结构。
将之比作浏览器在内部将页面表示为文本时必须进行的复杂事情，每次更改属性或结构都需要浏览器重新编写静态文件、重新解析并在屏幕上重新显示。
有了对象，所有这一切都解决了。
现在，花点时间展开一些HTML文档并用树将其勾画出来。
尽管这看起来是个不寻常的请求（尤其是在包含极少代码的这样一篇文章中），如果您希望能够操纵这些树，那么需要熟悉它们的结构。
在这个过程中，可能会发现一些古怪的事情。
比如，考虑下列情况：
∙属性发生了什么？
∙分解为元素（比如
em
b）的文本呢？
∙结构不正确（比如当缺少结束
标记时）的HTML呢？
一旦熟悉这些问题之后，就能更好地理解下面几节了。
严格有时是好事
如果尝试刚提到的练习I，您可能会发现标记的树视图中存在一些潜在问题（如果不练习的话，那就听我说吧！
）。
事实上，在
清单1
中就会发现一些问题，首先看
元素是如何分解的。
如果您问通常的Web开发人员“p
元素的文本内容是什么”，最常见的答案将是“WelcometoareallyboringWebpage.”。
如果将之与图1做比较，将会发现这个答案（虽然合乎逻辑）是根本不正确的。
实际上，p
元素具有三个
不同的子对象，其中没有一个包含完整的“WelcometoareallyboringWebpage.”文本。
您会发现文本的一部分，比如“Welcometoa”和“boringWebpage”，但不是全部。
为了理解这一点，记住标记中的任何内容都必须转换为某种类型的对象。
此外，顺序无关紧要！
如果浏览器显示正确的对象，但显示顺序与您在HTML中提供的顺序不同，那么您能想像出用户将如何响应Web浏览器吗？
段落夹在页面标题和文章标题中间，而这不是您自己组织文档时的样式呢？
很显然，浏览器必须保持元素和文本的顺序。
在本例中，p
元素有三个不同部分：
∙em
元素之前的文本
元素本身
元素之后的文本
如果将该顺序打乱，可能会把重点放在文本的错误部分。
为了保持一切正常，p
元素有三个子对象，其顺序是在
的HTML中显示的顺序。
而且，重点文本“really”
不是
的子元素；
而是
的子元素
的子元素。
理解这一概念非常重要。
尽管“really”文本将可能与其他
元素文本一起显示，但它仍是
元素的直接子元素。
它可以具有与其他
p文本不同的格式，而且可以独立于其他文本到处移动。
要将之牢记在心，试着用图表示清单
2
3
中的HTML，确保文本具有正确的父元素（而不管文本最终会如何显示在屏幕上）。
清单2.带有巧妙元素嵌套的标记
Thisisalittletricky<
Pay<
u>
close<
/u>
attention,OK?
Thispreallyisn'
t<
necessary<
butitmakesthe
spanid="
bold-text"
structure<
i>
and<
/i>
theorganization<
/span>
ofthepageeasiertokeepupwith.<
清单3.更巧妙的元素嵌套
Trickiernesting,still<
divid="
main-body"
contents"
table>
tr>
th>
Steps<
/th>
Process<
/tr>
td>
1<
/td>
Figureoutthe<
rootelement<
.<
2<
Dealwiththe<
code"
head<
first,
asit'
susuallyeasy.<
3<
Workthroughthe<
body<
.
Just<
takeyourtime<
/table>
closing"
Thislinkis<
not<
active,butifitwere,theanswers
tothis<
ahref="
answers.html"
exercise.gif"
/a>
would
bethere.But<
dotheexerciseanyway!
在本文末的GIF文件
图2中的tricky-solution.gif
图3中的trickier-solution.gif
中将会找到这些练习的答案。
不要偷看，先花些时间自动解答一下。
这样能帮助您理解组织树时应用的规则有多么严格，并真正帮助您掌握HTML及其树结构。
属性呢？
当您试图弄清楚如何处理属性时，是否遇到一些问题呢？
前已提及，属性确实具有自己的对象类型，但属性确实不是显示它的元素的子元素，嵌套元素和文本不在同一属性“级别”，您将注意到，清单
中练习的答案没有显示属性。
属性事实上存储在浏览器使用的对象模型中，但它们有一些特殊情况。
每个元素都有可用属性的列表，且与子对象列表是分离的。
所以
元素可能有一个包含属性“id”和另一个属性“class”的列表。
记住，元素的属性必须具有惟一的名称，也就是说，一个元素不能有两个“id”或两个“class”属性。
这使得列表易于维护和访问。
在下一篇文章将会看到，您可以简单调用诸如
getAttribute（"
id"
）
的方法来按名称获取属性的值。
还可以用相似的方法调用来添加属性或设置（重置）现有属性的值。
值得指出的是，属性名的惟一性使得该列表不同于子对象列表。
元素可以有多个
元素，所以子对象列表可以包含多个重复项。
尽管子项列表和属性列表的操作方式相似，但一个可以包含重复项（对象的子项），而一个不能（元素对象的属性）。
最后，只有元素具有属性，所以文本对象没有用于存储属性的附加列表。
凌乱的HTML
在继续之前，谈到浏览器如何将标记转换为树表示，还有一个主题值得探讨，即浏览器如何处理不是格式良好的标记。
格式良好
是XML广泛使用的一个术语，有两个基本意思：
∙每个开始标记都有一个与之匹配的结束标记。
所以每个
在文档中与
匹配，每个
与
匹配，等等。
∙最里面的开始标记与最里面的结束标记相匹配，然后次里面的开始标记与次里面的结束标记相匹配，依此类推。
b>
boldanditalics<
/b>
是不合法的，因为最里面的开始标记
与最里面的结束标记
匹配不当。
要使之格式良好，要么
切换开始标记顺序，要么
切换结束标记顺序。
（如果两者都切换，则仍会出现问题）。
深入研究这两条规则。
这两条规则不仅简化了文档的组织，还消除了不定性。
是否应先应用粗体后应用斜体？
或恰恰相反？
如果觉得这种顺序和不定性不是大问题，那么请记住，CSS允许规则覆盖其他规则，所以，例如，如果
b
元素中文本的字体不同于
i
元素中的字体，则格式的应用顺序将变得非常重要。
因此，HTML的格式良好性有着举足轻重的作用。
如果浏览器收到了不是格式良好的文档，它只会尽力而为。
得到的树结构在最好情况下将是作者希望的原始页面的近似，最坏情况下将面目全非。
如果您曾将页面加载到浏览器中后看到完全出乎意料的结果，您可能在看到浏览器结果时会猜想您的结构应该如何，并沮丧地继续工作。
当然，搞定这个问题相当简单：
确保文档是格式良好的！
如果不清楚如何编写标准化的HTML，请咨询
参考资料获得帮助。
DOM简介
到目前为止，您已经知道浏览器将Web页面转换为对象表示，可能您甚至会猜想，对象表示是DOM树。
DOM表示DocumentObjectModel，是一个规范，可从WorldWideWebConsortium（W3C）获得（您可以参阅
参考资料
中的一些DOM相关链接）。
但更重要的是，DOM定义了对象的类型和属性，从而允许浏览器表示标记。
（本系列下一篇文章将专门讲述在JavaScript和Ajax代码中使用DOM的规范。
）
文档对象
首先，需要访问对象模型本身。
这非常容易；
要在运行于Web页面上的任何JavaScript代码中使用内置
document
变量，可以编写如下代码：
vardomTree=document;
当然，该代码本身没什么用，但它演示了每个Web浏览器使得
对象可用于JavaScript代码，并演示了对象表示标记的完整树（图1）。
每项都是一个节点
显然，document
对象很重要，但这只是开始。
在进一步深入之前，需要学习另一个术语：
节点。
您已经知道标记的每个部分都由一个对象表示，但它不只是一个任意的对象，它是特定类型的对象，一个DOM节点。
更特定的类型，比如文本、元素和属性，都继承自这个基本的节点类型。
所以可以有文本节点、元素节点和属性节点。
如果已经有很多JavaScript编程经验，那您可能已经在使用DOM代码了。
升级会员 