第七讲（上）DHTML介绍 计算机网络安全与 及防护的PPT 互联网软件开发.pptx

中国地质大学（武汉）信息工程学院 互联网软件开发授课人：罗显刚电 话QQEmail ：BillLxg@126.com第七章： DHTML介绍内容提纲1、DHTML概述2、文档对象模型7.1 DHTML概述什么是DHTMLDHTML（Dynamic HTML），就是动态的html，是相对传统的静态的html而言的一种制作网页的概念。DHTML并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)。DHTML不是由万维网联盟（W3C）规定的标准，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。7.1 DHTML概述DHTML技术通过 DHTML，Web 开发者可控制如何在浏览器窗口中显示和定位 HTML 元素。 HTML：页面中的各种页面元素对象，它们是被动态操纵的内容之一；文档对象模型（DOM）：HTML DOM 定义了针对 HTML 的一套标准的对象，以及访问和处理 HTML文档 对象的标准方法。层叠样式表（CSS）：用于 HTML 文档的样式和布局模型。JavaScript：一段程序，通过操纵Web页上的各种对象完成某些特殊的功能。7.2 文档对象模型DOM的规范DOM的概念主要有：核心DOM：将带有标记的文档看成树状结构并据此对文档进行操作；DOM事件：包括使用者熟悉的鼠标、键盘事件，同时包括DOM特有事件，当操作文档对象模型的各元素对象时发生。HTML DOM：提供用于操作HTML文档以及类似于Javascript对象模型语法的功能部件，在核心DOM的基础上支持对所有HTML元素对象进行操作。DOM CSS：提供脚本编程实现CSS的接口。7.2 文档对象模型HTML DOM节点树HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。图7.1.1 HTML DOM节点树7.2 文档对象模型DOM节点根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点7.2 文档对象模型节点的层次html head titleDOM Tutorial/title /head body h1DOM Lesson one/h1 pHello world!/p /body /html父节点：除文档节点之外的每个节点都有父节点。举例，head 和 body 的父节点是 html 节点，文本节点 Hello world! 的父节点是 p 节点。子节点：大部分元素节点都有子节点。比方说，head 节点有一个子节点：title 节点。title 节点也有一个子节点：文本节点 DOM Tutorial。同级节点：当节点分享同一个父节点时，它们就是同级节点。比方说，h1 和 p是同辈，因为它们的父节点均是 body 节点。7.2 文档对象模型DOM访问节点可通过以下方法来查找希望操作的元素：通过使用 getElementById() 和 getElementsByTagName() 方法getElementById() 可通过指定的 ID 来返回元素，例如document.getElementById(‘maindiv’)返回ID为’maindiv’的元素。getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），如document.getElementsByTagName(“p”)返回页面中所有p元素这两种方法会返回任何你所需要的 HTML 元素，不论它们在文档结构中的哪个层次。7.2 文档对象模型节点列表（nodeList）当使用节点列表时，通常要把列表保存在一个变量中：var x=document.getElementsByTagName(p);变量 x 包含着页面中所有 p 元素的一个列表，可以通过索引号来访问这些 p 元素。通过使用 length 属性来循环遍历节点列表：var x=document.getElementsByTagName(p); for (var i=0;ix.length;i++) { // do something with each paragraph }7.2 文档对象模型parentNode、firstChild以及lastChild可以通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性来查找和访问元素。在右边的HTML