Javaweb之javascript的小案例的详细解析

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的文件，然后准备如下代码：

    
    
    
    

​

      


​
    
传智教育
   

    
黑马程序员
  

​
     电影
     旅游
     游戏

​

浏览器打开此时效果如图所示：

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中学过的标签和属性来完整。如何进行内容的替换呢？之前我们学习过innerHTML属性。需要替换2个div的内容，所以我们需要获取2个div，并且遍历进行替换。

• 步骤

  • 通过标签的名字div获取所有的div标签

  • 遍历所有的div标签

  • 获取div标签的原有内容，然后追加very good,并且替原内容

• 代码实现

  //2. 将所有div标签的内容后面加上: very good (红色字体) -- 
  var divs = document.getElementsByTagName('div');
  for (let i = 0; i < divs.length; i++) {
      const div = divs[i];
      div.innerHTML += "very good"; 
  }

浏览器打开效果如图所示：

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 完整代码

    
    
    
    

​

      


​
    
传智教育
   

    
黑马程序员
  

​
     电影
     旅游
     游戏

​