Ajax提高篇(2)DOM进行Web响应

转载 2015年09月08日 10:33:37
1. 简单 HTML 页面
            <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>
            
 1 的树视图
清单 1 的树视图

对象的值

既然了解了一些基本的术语,现在应该关注一下其中包含元素名称和文本的小矩形了(图 1)。每个矩形是一个对象;浏览器在其中解决一些文本问题。通过使用对象来表示 HTML 文档的每一部分,可以很容易地更改组织、应用样式、允许 JavaScript 访问文档,等等。

对象类型和属性

标记的每个可能类型都有自己的对象类型。例如,HTML 中的元素用 Element 对象类型表示。文档中的文本用 Text 类型表示,属性用Attribute 类型表示,以此类推。

所以 Web 浏览器不仅可以使用对象模型来表示文档(从而避免了处理静态文本),还可以用对象类型立即辨别出某事物是什么。HTML 文档被解析并转换为对象集合,如 图 1 所示,然后尖括号和转义序列(例如,使用 < 表示 <,使用 > 表示 >)等事物不再是问题了。这就使得浏览器的工作(至少在解析输入 HTML 之后)变得更容易。弄清某事物究竟是元素还是属性并确定如何处理该类型的对象,这些操作都十分简单了。

通过使用对象,Web 浏览器可以更改这些对象的属性。例如,每个元素对象具有一个父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一个新的子元素。这些对象还具有 style 属性,所以快速更改元素或文本段的样式非常简单。例如,要使用 JavaScript 更改 div 的高度,如下所示:

someDiv.style.height = "300px";
            

换句话说,Web 浏览器使用对象属性可以非常容易地更改树的外观和结构。将之比作浏览器在内部将页面表示为文本时必须进行的复杂事情,每次更改属性或结构都需要浏览器重新编写静态文件、重新解析并在屏幕上重新显示。有了对象,所有这一切都解决了。

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 根据需要创建变量并为其分配正确的类型。这也是简单的JS获得DOM元素。

相关文章推荐

[Ajax 完整教程]-第 4 页 利用 DOM 进行 Web 响应

程序员(使用后端应用程序)和 Web 程序员(编写 HTML、CSS 和 JavaScript)之间的分水岭是长久存在的。但是,Document Object Model (DOM) 弥补了这个裂缝,...
  • SB2ck
  • SB2ck
  • 2014年05月19日 15:49
  • 378

Ajax利用DOM进行Web 响应

一、综述 程序员(使用后端应用程序)和 Web 程序员(编写 HTML、CSS 和 JavaScript)之间的分水岭是长久存在的。但是,Document Object Model (DOM) 弥补了...

掌握 Ajax,第 4 部分: 利用 DOM 进行 Web 响应

程序员(使用后端应用程序)和 Web 程序员(编写 HTML、CSS 和 JavaScript 上)之间的分水岭是长久存在的。但是,Document Object Model (DOM) 弥补了这个裂...

第 4 部分: 利用 DOM 进行 Web 响应

与许多 Web 程序员一样,您可能使用过 HTML。HTML 是程序员开始与 Web 页面打交道的方式;HTML 通常是他们完成应用程序或站点前的最后一步——调整一些布局、颜色或样式。不过,虽然经常使...

利用 DOM 进行 Web 响应

新一篇: 掌握 Ajax,第 4 部分: 利用 DOM 进行 Web 响应 对于很多 Web 开发人员来说,只需要生成简单的请求并接收简单的响应即可;但是对于希望掌握 Ajax 的开发人员来说,...
  • Peisl
  • Peisl
  • 2011年12月31日 11:54
  • 469

Ajax提高篇(6)服务器端脚本和程序中用 JSON 进行响应和回复

JSON 是适用于 Ajax 应用程序的一种有效格式,原因是它使 JavaScript 对象和字符串值之间得以快速转换。由于 Ajax 应用程序非常适合将纯文本发送给服务器端程序并对应地接收纯文本,相...

掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序

本系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的概念——Web 浏览器如何把网页看作一棵树,现在您应该理解了 DOM 中使用的编程结构。本期教程将把这些知识用于实践,建立一个简单的包含一...

jsp使用DOM对xml文件进行操作的web小项目

项目下载地址:http://download.csdn.net/detail/zeq9069/4920226   项目截图:                   使用D...
  • zeq9069
  • zeq9069
  • 2012年12月23日 20:37
  • 1069

web前端之精通dojo五:利用Dojo进行DOM事件编程

web前端之精通dojo五:利用Dojo进行DOM事件编程如果针对浏览器编程,让它动态地做任何事,就必须将代码与DOM事件关联起来。这时你会发现有两种不同的事件API可用。不干预下风的IE提供了第三种...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax提高篇(2)DOM进行Web响应
举报原因:
原因补充:

(最多只允许输入30个字)