网页设计与制作-第6章 DHTML技术.ppt

第6章 DHTML技术 6.1 什么是DHTML 由纯粹的HTML标记编写的网页文件是静态的。DHTML可以实现与用户交互并包含动态内容的页面。见例。 DHTML（Dynamic HTML），也称动态HTML，是将HTML、CSS与客户端脚本语言的集成。 HTML页面元素成为DHML的操纵对象；CSS也是动态操纵的内容，以获得动态的格式效果；客户端脚本（JavaScript、VBScript）操纵页面中的HTML和CSS。 DHTML针对的是下载到本地的网页文件，在本地由浏览器完成，也就是说与服务器无关。与服务器脚本有本质区别。 DHTML实现的主要功能包括动态功能、定位功能以及利用CSS的功能。 /dhtml/index.asp 6.2 DHTML与文档对象模型DOM 文档对象模型DOM(Document Object Model)，是由万维网协会W3C(World Wide Web Consortium)制定的一个与平台和语言无关的规范。用于表示HTML元素以及Web浏览器信息的一个模型，它使程序脚本能够访问Web页上的信息。 在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）。 通过操纵文档对象模型中的对象的属性并调用方法，可以使脚本按照一定的方式显示Web页并与用户的动作进行交互。 对于各种脚本程序语言，通常都有一个DOM子集，以便在特定的脚本语言中实现对象模型。 JavaScript 本地对象和内置对象 Browser 对象（BOM） HTML DOM 对象 JavaScript 对象参考手册 Array Boolean Date Math Number String RegExp Global Browser 对象 对象 描述 Window JavaScript 层级中的顶层对象，表示浏览器窗口。 Navigator 包含客户端浏览器的信息。 Screen 包含客户端显示屏的信息。 History 包含了浏览器窗口访问过的 URL。 Location 包含了当前 URL 的信息。 属性 描述 closed 返回窗口是否已被关闭。 defaultStatus 设置或返回窗口状态栏中的默认文本。 document 对 Document 对象的只读引用。请参阅 Document 对象。 history 对 History 对象的只读引用。请参数 History 对象。 innerheight 返回窗口的文档显示区的高度。 innerwidth 返回窗口的文档显示区的宽度。 length 设置或返回窗口中的框架数量。 location 用于窗口或框架的 Location 对象。请参阅 Location 对象。 name 设置或返回窗口的名称。 Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。 opener 返回对创建此窗口的窗口的引用。 outerheight 返回窗口的外部高度。 outerwidth 返回窗口的外部宽度。 pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 parent 返回父窗口。 Screen 对 Screen 对象的只读引用。请参数 Screen 对象。 self 返回对当前窗口的引用。等价于 Window 属性。 status 设置窗口状态栏的文本。 top 返回最顶层的先辈窗口。 window window 属性等价于 self 属性，它包含了对窗口自身的引用。 screenLeft screenTop screenX screenY 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 Window 对象属性 方法 描述 alert() 显示带有一段消息和一个确认按钮的警告框。 blur() 把键盘焦点从顶层窗口移开。 clearInterval() 取消由 setInterval() 设置的 timeout。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 close() 关闭浏览器窗口。 confirm() 显示带有一段消息