利用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 应用程序所关注的)，您操作的是页面的结构。尽管很容易更改一段文本的颜色，但在现有页面上添加文本或整个区段要难得多。不管用户如何设计该区段的样式，都是由您控制页面本身的组织。

送TA礼物

1楼2008-03-01 10:53回复

　　标记做什么

　　一旦意识到您的标记是真正与组织相关的，您就会对它另眼相看了。不会认为 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 时有了前所未有的灵活性。

　　进一步了解 Web 浏览器

　　对于一些 Web 程序员来说，在前文阅读到的所有内容可能是对您在 Web 开发过程中角色的滑稽讲述。但说到浏览器的行为，许多最能干的 Web 设计人员和开发人员通常都没有意识到 “内幕” 的实际状况。我将在本节重点进行讲述。不要担心，代码很快就到，但是要克制您编码的急躁心情，因为真正了解 Web 浏览器的确切行为对于您的代码正确工作是非常关键的。

　　文本标记的缺点

　　正如文本标记对于设计人员和页面创建者具有惊人的优点之外，它对于浏览器也具有相当出奇的缺点。具体来说，浏览器很难直接将文本标记可视地表示给用户(详细信息请参阅有关标记的一些其他想法)。考虑下列常见的浏览器任务:

　　基于元素类型、类、ID 及其在 HTML 文档中的位置，将 CSS 样式(通常来自外部文件中的多个样式表)应用于标记。
　　基于 JavaScript 代码(通常位于外部文件)将样式和格式应用于 HTML 文档的不同部分。
　　基于 JavaScript 代码更改表单字段的值。
　　基于 JavaScript 代码，支持可视效果，比如图像翻转和图像交换。
　　复杂性并不在于编码这些任务;其中每件事都是相当容易的。复杂性来自实际实现请求动作的浏览器。如果标记存储为文本，比如，想要在 center-text 类的 p 元素中输入文本 (text-align: center)，如何实现呢?

　　将内联样式添加到文本吗?

2楼2008-03-01 10:53

    </table>
   </div>
   <div id="closing">
    This link is <em>not</em> active, but if it were, the answers
    to this <a href="answers.html"><img src="http://www.okajax.com/info/cord/exercise.gif" /></a> would
    be there. But <em>do the exercise anyway!</em>
   </div>
  </div>
</body>
</html>

　　在本文末的 GIF 文件图 2 中的 tricky-solution.gif 和图 3 中的 trickier-solution.gif 中将会找到这些练习的答案。不要偷看，先花些时间自动解答一下。这样能帮助您理解组织树时应用的规则有多么严格，并真正帮助您掌握 HTML 及其树结构。

　　属性呢?

　　当您试图弄清楚如何处理属性时，是否遇到一些问题呢?前已提及，属性确实具有自己的对象类型，但属性确实不是显示它的元素的子元素，嵌套元素和文本不在同一属性 “级别”，您将注意到，清单 2 和 3 中练习的答案没有显示属性。

　　属性事实上存储在浏览器使用的对象模型中，但它们有一些特殊情况。每个元素都有可用属性的列表，且与子对象列表是分离的。所以 div 元素可能有一个包含属性 “id” 和另一个属性 “class” 的列表。

　　记住，元素的属性必须具有惟一的名称，也就是说，一个元素不能有两个 “id” 或两个 “class” 属性。这使得列表易于维护和访问。在下一篇文章将会看到，您可以简单调用诸如 getAttribute("id") 的方法来按名称获取属性的值。还可以用相似的方法调用来添加属性或设置(重置)现有属性的值。

　　值得指出的是，属性名的惟一性使得该列表不同于子对象列表。p 元素可以有多个 em 元素，所以子对象列表可以包含多个重复项。尽管子项列表和属性列表的操作方式相似，但一个可以包含重复项(对象的子项)，而一个不能(元素对象的属性)。最后，只有元素具有属性，所以文本对象没有用于存储属性的附加列表。

　　凌乱的 HTML

　　在继续之前，谈到浏览器如何将标记转换为树表示，还有一个主题值得探讨，即浏览器如何处理不是格式良好的标记。格式良好是 XML 广泛使用的一个术语，有两个基本意思：

      每个开始标记都有一个与之匹配的结束标记。所以每个 <p> 在文档中与 </p> 匹配，每个 <div> 与 </div> 匹配，等等。
      最里面的开始标记与最里面的结束标记相匹配，然后次里面的开始标记与次里面的结束标记相匹配，依此类推。所以 <b><i>bold and italics</b></i> 是不合法的，因为最里面的开始标记 <i> 与最里面的结束标记 <b> 匹配不当。要使之格式良好，要么切换开始标记顺序，要么切换结束标记顺序。（如果两者都切换，则仍会出现问题）。
      深入研究这两条规则。这两条规则不仅简化了文档的组织，还消除了不定性。是否应先应用粗体后应用斜体？或恰恰相反？如果觉得这种顺序和不定性不是大问题，那么请记住，CSS 允许规则覆盖其他规则，所以，例如，如果 b 元素中文本的字体不同于 i 元素中的字体，则格式的应用顺序将变得非常重要。因此，HTML 的格式良好性有着举足轻重的作用。

      如果浏览器收到了不是格式良好的文档，它只会尽力而为。得到的树结构在最好情况下将是作者希望的原始页面的近似，最坏情况下将面目全非。如果您曾将页面加载到浏览器中后看到完全出乎意料的结果，您可能在看到浏览器结果时会猜想您的结构应该如何，并沮丧地继续工作。当然，搞定这个问题相当简单：确保文档是格式良好的！如果不清楚如何编写标准化的 HTML，请咨询参考资料获得帮助。
     DOM 简介
      到目前为止，您已经知道浏览器将 Web 页面转换为对象表示，可能您甚至会猜想，对象表示是 DOM 树。DOM 表示 Document Object Model，是一个规范，可从 World Wide Web Consortium (W3C) 获得（您可以参阅参考资料中的一些 DOM 相关链接）。

5楼2008-03-01 10:53

       但更重要的是，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 的内容要远远多于我今天介绍的这些！

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

      而且不要忘了，这里有清单 2 和 3 的答案，其中还包含了示例代码！

图 2. 清单 2 的答案

图 3. 清单 3 的答案

6楼2008-03-01 10:53

学习···学习···

IP属地:河南

7楼2009-11-20 19:21

日	一	二	三	四	五	六

利用DOM进行Web响应

登录百度账号

扫二维码下载贴吧客户端