Ajax完整教程--利用 DOM 进行 Web 响应 |
|
| 来源：互联网 作者： 发布时间：2008-05-01 |
|
|
属性呢？
当您试图弄清楚如何处理属性时，是否遇到一些问题呢？前已提及，属性确实具有自己的对象类型，但属性确实不是显示它的元素的子元素，嵌套元素和文本不在同一属性 “级别”，您将注意到，清单 2 和 3 中练习的答案没有显示属性。
属性事实上存储在浏览器使用的对象模型中，但它们有一些特殊情况。每个元素都有可用属性的列表，且与子对象列表是分离的。所以 div 元素可能有一个包含属性 “id” 和另一个属性 “class” 的列表。
记住，元素的属性必须具有惟一的名称，也就是说，一个元素不能有两个 “id” 或两个 “class” 属性。这使得列表易于维护和访问。在下一篇文章将会看到，您可以简单调用诸如 getAttribute("id") 的方法来按名称获取属性的值。还可以用相似的方法调用来添加属性或设置（重置）现有属性的值。
值得指出的是，属性名的惟一性使得该列表不同于子对象列表。p 元素可以有多个 em 元素，所以子对象列表可以包含多个重复项。尽管子项列表和属性列表的操作方式相似，但一个可以包含重复项（对象的子项），而一个不能（元素对象的属性）。最后，只有元素具有属性，所以文本对象没有用于存储属性的附加列表。 phperz~com
凌乱的 HTML
在继续之前，谈到浏览器如何将标记转换为树表示，还有一个主题值得探讨，即浏览器如何处理不是格式良好的标记。格式良好 是 XML 广泛使用的一个术语，有两个基本意思：
·每个开始标记都有一个与之匹配的结束标记。所以每个 <p> 在文档中与 </p> 匹配，每个 <div> 与 </div> 匹配，等等。
·最里面的开始标记与最里面的结束标记相匹配，然后次里面的开始标记与次里面的结束标记相匹配，依此类推。所以 <b><i>bold and italics</b></i> 是不合法的，因为最里面的开始标记 <i> 与最里面的结束标记 <b> 匹配不当。要使之格式良好，要么 切换开始标记顺序，要么 切换结束标记顺序。（如果两者都切换，则仍会出现问题）。
深入研究这两条规则。这两条规则不仅简化了文档的组织，还消除了不定性。是否应先应用粗体后应用斜体？或恰恰相反？如果觉得这种顺序和不定性不是大问题，那么请记住，CSS 允许规则覆盖其他规则，所以，例如，如果 b 元素中文本的字体不同于 i 元素中的字体，则格式的应用顺序将变得非常重要。因此，HTML 的格式良好性有着举足轻重的作用。 phperz.com
如果浏览器收到了不是格式良好的文档，它只会尽力而为。得到的树结构在最好情况下将是作者希望的原始页面的近似，最坏情况下将面目全非。如果您曾将页面加载到浏览器中后看到完全出乎意料的结果，您可能在看到浏览器结果时会猜想您的结构应该如何，并沮丧地继续工作。当然，搞定这个问题相当简单：确保文档是格式良好的！如果不清楚如何编写标准化的 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）。 php程序员站
每项都是一个节点
显然，document 对象很重要，但这只是开始。在进一步深入之前，需要学习另一个术语：节点。您已经知道标记的每个部分都由一个对象表示，但它不只是一个任意的对象，它是特定类型的对象，一个 DOM 节点。更特定的类型，比如文本、元素和属性，都继承自这个基本的节点类型。所以可以有文本节点、元素节点和属性节点。
如果已经有很多 JavaScript 编程经验，那您可能已经在使用 DOM 代码了。如果到目前为止您一直在跟踪本 Ajax 系列，那么现在您一定 使用 DOM 代码有一段时间了。例如，代码行 var number = document.getElementById("phone").value; 使用 DOM 查找特定元素，然后检索该元素的值（在本例中是一个表单字段）。所以即使您没有意识到这一点，但您每次将 document 键入 JavaScript 代码时都会使用 DOM。
详细解释已经学过的术语，DOM 树是对象的树，但更具体地说，它是节点 对象的树。在 Ajax 应用程序中或任何其他 JavaScript 中，可以使用这些节点产生下列效果，比如移除元素及其内容，突出显示特定文本，或添加新图像元素。因为都发生在客户端（运行在 Web 浏览器中的代码），所以这些效果立即发生，而不与服务器通信。最终结果通常是应用程序感觉起来响应更快，因为当请求转向服务器时以及解释响应时，Web 页面上的内容更改不会出现长时间的停顿。 phperz~com
在多数编程语言中，需要学习每种节点类型的实际对象名称，学习可用的属性，并弄清楚类型和强制转换；但在 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 是关于代码的，而事实上并非如此。 phperz~com
在阅读下一篇文章之前，试着思考一下树结构并用一些您自己的 HTML 实践一下，以查看 Web 浏览器是如何将 HTML 转换为标记的树视图的。此外，思考一下 DOM 树的组织，并用本文介绍的特殊情况实践一下：属性、有元素混合在其中的文本、没有 文本内容的元素（比如 img 元素）。
如果扎实掌握了这些概念，然后学习了 JavaScript 和 DOM 的语法（下一篇文章），则会使得响应更为容易。
而且不要忘了，这里有清单 2 和 3 的答案，其中还包含了示例代码！
图 2. 清单 2 的答案
图 3. 清单 3 的答案
|
| 上一页123下一页 |
| [收藏此页] [打印本页] [返回顶部] |
|
|
|
|
|
| |
|
|
|
|
