DHTML DOM（Document Object Model）

DOM （文档对象模型）是我们有能力访问一个文档中的每个元素。

实例

注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

元素访问

如何访问一个元素并改变它的样式。 

  1. <html>
  2. <body>
  4. <h1 id="header">我的标题</h1>
  6. <script type="text/javascript">
  7. document.getElementById('header').style.color="red"
  8. </script>
  10. <p><b>注释：</b>是脚本改变了该元素的样式！</p>
  12. </body>
  13. </html>

属性改变

如何访问一个图像元素并修改 "src" 属性。 

  1. <html>
  2. <body>
  4. <img id="image" src="/i/eg_smile.gif" />
  6. <script type="text/javascript">
  7. document.getElementById('image').src="/i/eg_landscape.jpg"
  8. </script>
  10. <p><b>注释：</b>原始图片是一个笑脸，但是上面的脚本把图片改为风景。</p>
  12. </body>
  13. </html>

innerHTML

如何访问并修改一个元素的内容。 

  1. <html>
  2. <body>
  4. <h1 id="header">旧标题</h1>
  6. <script type="text/javascript">
  7. document.getElementById('header').innerHTML="新标题"
  8. </script>
  10. <p>请注意，原始的文本是“旧标题”。</p>
  12. </body>
  13. </html>

如何访问一个元素？

元素必须拥有被定义的 id 属性，且需要一段脚本语言。JavaScript 是浏览器兼容性最好的脚本语言，所以我们使用 JavaScript。

  1. <html>
  2. <body>
  3.  
  4. <h1 id="header">My header</h1>
  5.  
  6. <script type="text/javascript">
  7. document.getElementById('header').style.color="red"
  8. </script>
  9.  
  10. </body>
  11. </html>

这段脚本可改变标题元素的颜色，并生成输出。

  1. My header