1.5.4 案例
1.5.4.1 需求说明
鲁迅说的好，光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个：
-
点亮灯泡
-
将所有的div标签的标签体内容后面加上：very good
-
使所有的复选框呈现被选中的状态
效果如下所示：
1.5.4.2 资料准备
在JS目录下，也就是用于存放html文件的同级创建img文件下，然后将资料/图片素材中提供的2张图片拷贝到img文件夹中，最终整体结果如下图所示：
在VS Code中创建名为08. JS-对象-DOM-案例.html的文件，然后准备如下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head>
<body><img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>
<script></script>
</html>浏览器打开此时效果如图所示：
1.5.4.3 需求1
-
需求
点亮灯泡
-
分析
此时我们需要把灯泡点亮，其实就是换一张图片。那么我们需要切换图片，就需要操作图片的src属性。要操作图片的src属性，就需要先来获取img标签对象。
-
步骤
-
首先获取img标签对象
-
然后修改img标签对象的src属性值，进行图片的切换
-
-
代码实现
//1. 点亮灯泡 : src 属性值 //首先获取img标签对象 var img = document.getElementById('h1'); //然后修改img标签对象的src属性值，进行图片的切换 img.src = "img/on.gif";
浏览器打开，效果如图所示：
1.5.4.4 需求2
-
需求
将所有的div标签的标签体内容后面加上：very good
并且very good是红色字体
-
分析
我们需要在原有内容后面追加红色的very good.所以我们首先需要获取原有内容，然后再进行内容的追加。但是如何保证very good是红色的呢？所以我们可以通过之前html中学过的<font>标签和属性来完整。如何进行内容的替换呢？之前我们学习过innerHTML属性。需要替换2个div的内容，所以我们需要获取2个div，并且遍历进行替换。
-
步骤
-
通过标签的名字div获取所有的div标签
-
遍历所有的div标签
-
获取div标签的原有内容，然后追加<font color='red'>very good</font>,并且替原内容
-
-
代码实现
//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font> var divs = document.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }
浏览器打开效果如图所示：
1.5.4.5 需求3
-
需求
使所有的复选框呈现被选中的状态
-
分析
要让复选框处于选中状态，那么什么属性或者方法可以使复选框选中？可以查询资料得出checkbox标签对象的checked属性设置为true，可以改变checkbox为选中状态。那么需要设置所有的checkbox，那么我们需要获取所有的checkbox并且遍历
-
步骤
-
可以通过name属性值获取所有的checkbox标签
-
遍历所有的checkbox标签，
-
设置每个checkbox标签的
-
-
代码实现
// //3. 使所有的复选框呈现选中状态 var ins = document.getElementsByName('hobby'); for (let i = 0; i < ins.length; i++) { const check = ins[i]; check.checked = true;//选中 }
浏览器刷新，效果如图所示:
1.5.4.6 完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head>
<body><img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>
<script>//1. 点亮灯泡 : src 属性值var img = document.getElementById('h1');img.src = "img/on.gif";
//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>var divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }
// //3. 使所有的复选框呈现选中状态var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];check.checked = true;//选中}
</script>
</html>
