DHTML DOM（Document Object Model）
DHTML 2023-08-04 20:44:23小码哥的IT人生shichen
DHTML DOM（Document Object Model）
DOM （文档对象模型）是我们有能力访问一个文档中的每个元素。
实例
注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！
完整实例【元素访问】：
<html>
<body>
<h1 id="header">我的标题</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red"
</script>
<p><b>注释：</b>是脚本改变了该元素的样式！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何访问一个元素并改变它的样式。
完整实例【属性改变】：
<html>
<body>
<img id="image" src="/i/eg_smile.gif" />
<script type="text/javascript">
document.getElementById('image').src="/i/eg_landscape.jpg"
</script>
<p><b>注释：</b>原始图片是一个笑脸，但是上面的脚本把图片改为风景。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何访问一个图像元素并修改 "src" 属性。
完整实例【innerHTML】：
<html>
<body>
<h1 id="header">旧标题</h1>
<script type="text/javascript">
document.getElementById('header').innerHTML="新标题"
</script>
<p>请注意，原始的文本是“旧标题”。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何访问并修改一个元素的内容。
如何访问一个元素？
元素必须拥有被定义的 id 属性，且需要一段脚本语言。JavaScript 是浏览器兼容性最好的脚本语言，所以我们使用 JavaScript。
<html>
<body>
<h1 id="header">My header</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red"
</script>
</body>
</html>
这段脚本可改变标题元素的颜色，并生成输出。
My header
