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>
