第七周学习周记
前言
在上一周学习了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{
border: 1px solid #000;
width: 400px;
}
</style>
<script type="text/javascript">
function change(){
var all = document.getElementById("checkbox_all");
var cb = document.getElementsByName("personid");
//判断全选按钮是否被选中
if(all.checked){
for(var i = 0; i < cb.length; i++){
cb[i].checked = true;
}
}else{
for(var i = 0; i < cb.length; i++){
cb[i].checked = false;
}
}
}
//反选
function reverse(){
//获取所有的checkbox
var cb = document.getElementsByName("personid");
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>全选<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
<tr>
<td><input type="checkbox" name="personid" /></td>
<td>赵云</td>
<td>14</td>
<td>33333333</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>马超</td>
<td>17</td>
<td>44444444</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>关羽</td>
<td>19</td>
<td>55555555</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>张飞</td>
<td>23</td>
<td>66666666</td>
</tr>
</table>
<input type="button" value="反选" onclick="reverse()"/>
</body>
</html>
运行结果：
2. 下拉列表左右选择
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.center{
float:left;
margin-left: 100px ;
}
</style>
</head>
<body>
<div class="center">
<select id="select1" multiple style="width:100px;height: 200px;" ondblclick="sel()">
<option value="选项1">语文</option>
<option value="选项2">数学</option>
<option value="选项3">英语</option>
<option value="选项4">物理</option>
<option value="选项5">化学</option>
</select>
<input type="button" onclick="sel()" value="将左边选中的选项添加到右边" />
</div>
<div class="center">
<select id="select2" multiple style="width:100px;height: 200px;" ondblclick="cancel_sel()">
</select>
<input type="button" onclick="cancel_sel()" value="将右边选中的选项添加到左边" />
</div>
</body>
<script type="text/javascript">
function sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select1_options = select1.getElementsByTagName("option");
for(var i = 0; i < select1_options.length; i++){
var opt = select1_options[i];
if(opt.selected){
select2.appendChild(opt);
}
}
}
//取消选中
function cancel_sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select2_options = select2.getElementsByTagName("option");
for(var i = 0; i < select2_options.length; i++){
var opt = select2_options[i];
if(opt.selected){
select1.appendChild(opt);
}
}
}
</script>
</html>
运行结果：
3. 省市联动
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
省：
<select id="sheng" onchange="selectShi()">
<option value="">请选择省份</option>
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">河北省</option>
<option value="3">山西省</option>
</select>
市：
<select id="shi">
<option value="">请选择市</option>
</select>
</body>
<script type="text/javascript">
var arrs = [];
arrs[0] = ["西城区","东城区","海淀区","房山区"];
arrs[1] = ["徐汇区","浦东新区","长宁区","静安区"];
arrs[2] = ["石家庄","衡水","保定","邯郸"];
arrs[3] = ["太原","大同","运城","忻州"];
function selectShi(){
var sheng = document.getElementById('sheng').value;
var shi = document.getElementById("shi");
var shis = arrs[sheng];
//清空原来的信息
//获取市的option属性
var shi_opts = shi.getElementsByTagName("option");
//遍历删除市中的option
for(var i= shi_opts.length - 1; i >= 1; i--){
var shi_opt = shi_opts[i];
shi.removeChild(shi_opt);
}
for(var i = 0; i < shis.length; i++){
var textNode = document.createTextNode(shis[i]);
var opt = document.createElement("option");
opt.appendChild(textNode);
shi.appendChild(opt);
}
}
</script>
</html>
运行结果：
总结
这周学习了JavaScript HTML DOM，了解了通过DOM可以改变HTML和CSS的内容，并且通过实例，更加掌握了相关知识。
版权声明：本文为jix_Hu原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。