这篇博客记录了作者第七周的学习内容——JavaScript HTML DOM。内容涵盖DOM简介、如何使用DOM改变HTML（包括输出流、内容和属性）以及改变CSS。通过实例展示了全选练习、下拉列表选择和省市联动等应用。
第七周学习周记
前言
在上一周学习了JavaScript后，这一周将学习JavaScript HTML DOM。
一、JavaScript HTML DOM简介
JavaScript HTML DOM，通过HTML DOM，可访问JavaScript HTML文档的所有元素。
HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM模型被构造为对象的树：
通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。
JavaScript能够改变页面中的所有HTML元素；
JavaScript能够改变页面中的所有HTML属性；
JavaScript能够改变页面中的所有CSS样式；
JavaScript能够对页面中的所有事件做出反应。
二、使用DOM改变HTML
HTML DOM允许JavaScript改变HTML元素的内容。
1. 改变HTML输出流
JavaScript能够创建动态的HTML内容：
今天的日期是：Sun Apr 25 2021 22:30:17 GMT+0800 (中国标准时间)
在JavaScript中，document.write()可用于直接向HTML输出流写内容。
代码：
<script>
document.write(Date());
</script>
运行结果：
2. 改变HTML内容
修改HTML内容的最简单的方法是使用innerHTML属性。
代码：
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
运行结果：
3. 改变HTML属性
代码：
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
运行结果：
三、使用DOM改变CSS
1. 改变HTML样式
代码：
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
运行结果：
2. 使用事件
代码：
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>
运行结果：
点击后：
四、实例
1. 全选练习
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table
最低0.47元/天 解锁文章
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
