转载--Ajax学习---DOM进行Web响应

此文很基础，但是很底层。

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）。每个矩形是一个对象；浏览器在其中解决一些文本问题。通过使用对象来表示 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元素。

posted on 2009-05-05 10:39 ecmascript 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/ecmascript/archive/2009/05/05/1449678.html

转载--Ajax学习---DOM进行Web响应相关推荐

掌握 Ajax，第 4 部分: 利用 DOM 进行 Web 响应
http://www-128.ibm.com/developerworks/cn/xml/wa-ajaxintro4/
掌握 Ajax，第 6 部分: 建立基于 DOM 的 Web 应用程序
在不刷新页面的情况下使用 DOM 改变网页界面文档选项将此页作为电子邮件发送未显示需要 JavaScript 的文档选项样例代码级别: 中级 Brett McLaughlin (mailto ...
ASP.NET AJAX学习记要(2)-下手之DOM
要学习DOM,那什么是DOM?为什么要学习DOM?DOM是文档对象模型.借用网站w3pop.com上的一段话:["W3C文档对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容.结 ...
ajax学习记录总结
Ajax学习记录 URL 地址组成:客户端与服务器之间的通信协议存有该资源的服务器名称资源在服务器上具体的存放位置客户端与服务器通信过程请求-处理-相应资源的请求方式 get请求用于获取服务 ...
Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节全局 ...
asp.net的Ajax学习进阶
asp.net的Ajax学习进阶作者:清清月儿主页:http://blog.csdn.net/21aspnet/ 时间:2007.6.3 1.什么是Ajax? 2006年忽如 ...
JS加强学习-DOM学习01
JavaScript由三个部分组成:ECMAScript.DOM.BOM.前面已经学习了ECMAScript中的基础内容,现在可以开始学习DOM部分了,在DOM中更多的是实际效果的展现. 1. DOM ...
ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据
一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...
基于DOM的Web信息提取方法
摘要文章提出一种基于DOM的Web信息提取方法,通过归纳学习获得被提取信息的定位路径,利用XPath和XSLT在数据定位和数据转换方面的特点编写提取模式,根据网页元素与DOM节点对应关系,判断所 ...
我的AJAX 学习系列文章
我最近学习AJAX 的笔记 AJAX 学习笔记[一] 简单的异步通信示例 AJAX 学习笔记[二] 我编写的AJAX 测试代码示例 AJAX 学习笔记[三] get 与post 模式的区别 AJAX ...

转载--Ajax学习---DOM进行Web响应

转载--Ajax学习---DOM进行Web响应相关推荐

最新文章

热门文章