20、动态 HTML 技术全解析

动态 HTML 技术全解析

1. 动态 HTML 概述

动态 HTML（DHTML）是标准 HTML、CSS 以及常搭配使用的 JavaScript 的组合，用于创建动态网页效果，如动画、动态菜单、文字特效（像投影效果）、鼠标悬停显示文字等。DHTML 若运用得当，能显著提升用户体验，但过去那些华而不实的特效如今重要性存疑，使用不当还会让用户厌烦。本章聚焦于 DHTML 更实用的方面，尤其是与导航相关的内容。在对网站进行改进时，需思考是否能提升用户体验、便于用户导航和阅读网页。

2. DHTML 的工作原理

DHTML 可通过应用特定 CSS 属性或使用 JavaScript 操作 HTML 元素来实现。使用 JavaScript 时，它借助浏览器的对象模型，该模型是基于 HTML 元素集和 CSS 属性集构建的对象树。当针对此对象模型进行编码时，可更改元素的属性，这些属性在 JavaScript 环境中被称为元素的属性。而这些属性的引用方式以及可对其执行的操作（方法），由文档对象模型（DOM）决定。

2.1 文档对象模型（DOM）

DOM 是通过通用应用程序编程接口（API）访问网页各部分的标准化过程。实际上，文档中的每个元素都可通过脚本（通常是 JavaScript）访问。虽然访问 DOM 的语言不一定是 JavaScript，也可以是 Java、C# 或 Visual Basic 等，但大多数与浏览器相关的 DOM 活动由 JavaScript 驱动。JavaScript 的标准化形式是 ECMAScript，若将脚本限制在 W3C 的一级核心 DOM 和 ECMAScript 的组合中，通常能很好地实现跨浏览器脚本兼容性。E