让 Web 页面动起来的动态 HTML

所谓动态 HTML(Dynamic HTML)，是指使用客户端脚本语言将静态的 HTML 内容变成动态的技术的总称。鼠标单击点开的新闻、Google Maps 等可滚动的地图就用到了动态 HTML。

动态 HTML 技术是通过调用客户端脚本语言 JavaScript，实现对 HTML 的 Web 页面的动态改造。利用 DOM（Document ObjectModel，文档对象模型）可指定欲发生动态变化的 HTML 元素。

更易控制 HTML 的 DOM

DOM 是用以操作 HTML 文档和 XML 文档的 API（ApplicationProgramming Interface，应用编程接口）。使用 DOM 可以将 HTML 内的元素当作对象操作，如取出元素内的字符串、改变那个 CSS 的属性等，使页面的设计发生改变。

通过调用 JavaScript 等脚本语言对 DOM 的操作，可以以更为简单的方式控制 HTML 的改变。

html

<body>
  <h1>繁琐的Web安全</h1>
  <p>第Ⅰ部分  Web的构成元素</p>
  <p>第Ⅱ部分  浏览器的安全功能</p>
  <p>第Ⅲ部分  接下来发生的事</p>
</body>

比如，从 JavaScript 的角度来看，将上述 HTML 文档的第 3 个 P 元素（P 标签）改变文字颜色时，会像下方这样编写代码：

html

<script type="text/javascript">
  var content = document.getElementsByTagName('P');
  content[2].style.color = '#FF0000';
</script>

document.getElementsByTagName('P') 语句调用 getElementsByTagName 函数，从整个 HTML 文档（document object）内取出 P 元素。接下来的 content[2].style.color ='#FF0000’ 语句指定 content 的索引为 2（第 3 个）的元素的样式颜色改为红色（#FF0000）。

DOM 内存在各种函数，使用它们可查阅 HTML 中的各个元素。

让 Web 页面动起来的动态 HTML ​

更易控制 HTML 的 DOM ​

让 Web 页面动起来的动态 HTML

更易控制 HTML 的 DOM