网站设计原理dom技术91dom技术.ppt

第 8 章 DOM 技术 DOM （ Document Object Model ，文档对象模型）在 Ajax 中 发挥着重要作用。在不刷新页面的情况下负责对已载入页面进行 动态更新，实现数据的动态显示和交互。 DOM 给 HTML 和 XML 文 件提供了一组 API ，包括文件的结构表述，允许开发者改变其中 的内容，如文本信息、图片、显示样式等。 DOM 的本质是建立 页面和 JavaScript 脚本（或其他程序语言）之间的沟通桥梁。 1 本章学习要点 : ? ? ? ? ? 了解 DOM 的概念及其组成 了解 DOM 的层次结构和产生过程 掌握使用 DOM 获取文档对象的方法 掌握 DOM 对节点和节点列表的操作 掌握操作元素和属性的方法 2 8.1 DOM 概述 ? DOM 最初是 W3C 为了解决浏览器混战时代不同浏览器环境 之间的差别而制定的模型标准，主要是针对 IE 和 Netscape Navigator 。 W3C 解释为：“文档对象模型（ DOM ）是一个能 够让程序和脚本动态访问和更新文档内容、结构 和样式的语言 平台，提供了标准的 HTML 和 XML 对象集，并有一个标准的接口 来访问并操作它们”。 3 8.1.1 DOM 简介 ? 文档对象模型定义了 JavaScript 可以进行操作的浏览器，描 述了文档对象的逻辑结构及 各功能部件的标准接口。主要包括如 下方面： ? 核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数 等）。 ? 与数据类型相关的核心对象（ String 、 Array 、 Math 、 Date 等数据 类型）。 ? 浏览器对象（ window 、 location 、 history 、 navigator 等）。 ? 文档对象（ document 、 images 、 form 等）。 4 8.1.2 基本对象模型 ? 基本对象模型提供了一个非常基础的文档对象层次结构， 并最先受到 NN2 的脚本支持。在该模型中， window 位于对象 层次的最高级，包括全部的 document 对象，同时具有其他对 象所没有的属性和方法， document 就是浏览器载入的 HTML 页面，其上的链接和表单元素如按钮等交互性元素被作为有属 性、方法和事件处理程序的元素对象来对待。由于功能十分有 限， JavaScript 主要应用于简单的网页操作，如表单合法性验 证、获取程序最后一次修改的时间等等。 5 8.1.3 浏览器扩展 ? 在各个版本浏览器中，文档对象模型都有其特殊的地方。一 般来说，每发布一个新版本的浏览器，浏览器厂商都会以各种方 式扩展 document 对象，新版本修订了老版本的程序错误，同时 添加了对象的属性、方法及事件处理程序等，不断扩充原有的功 能。 6 8.1.4 W3C DOM ? 客户端 Web 应用程序开发人员面对的最大障碍在于 DOM 有 很多不同的版本，同时在浏览器版本更替过程中，对象模型又 不是统一的，如果需要在不同浏览器环境中运行该网页，将会 发现对象的很多属性或方法，甚至某些对象都不起作用。 W3C 文档对象模型 (DOM) 是一个中立的接口语言平台，为程序以及 脚本动态地访问和更新文档内容，结构以及样式提供一个通用 的标准。 7 8.2 DOM 文档对象的产生过程 ? 在面向对象或基于对象的编程语言中，指定对象的作用域 越小，对象位置的假定也就越多。对客户端 JavaScript 脚本而 言，其对象一般不超过浏览器，脚本不会访问计算机硬件、 操作系统、其他程序等其他超出浏览器的对象。 8 8.3 DOM 的属性和方法 ? DOM 将文档表示为一棵枝繁叶茂的家谱树，如果把文档元素想 象成家谱树上的各个节点的话，可以用同样的记号来描述文档结构 模型，在这种意义上讲，将文档看成一棵“节点树”更为准确。在 充分认识这棵树之前，先来了解 DOM 的节点。 9 8.3.1 DOM 节点 ? 所谓节点 (node) ，表示某个网络中的一个连接点，换句话说， 网络是节点和连线的集合。在 W3C DOM 中，每个容器、独立的元 素或文本块都被看着一个节点，节点是 W3C DOM 的基本构建块。 当一个容器包含另一个容器时，对应的节点之间有父子关系。同时 该节点树遵循 HTML 的结构化本质，如 html 元素包含 head 、 body ，前者又包含