JS对象-DOM案例

1、通过DOM操作，完成如下效果实现：
①点亮灯泡
②将所有的div标签的标签体内容后面加上：very good
③使所有的复选框呈现被选中的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id = "h1" src = "./Picture/off电灯泡.jpg"> <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、点亮灯泡:（即把图片off电灯泡换成on电灯泡），需要改变src的属性值
        //由于上面给img赋予了id属性，最简单的办法就是根据ID获取Element元素
        var img = document.getElementById('h1');
        img.src = "./Picture/on电灯泡.jpg";
        //2、将所有div标签的内容后面加上：very good(红色字体)
        //先要拿到div标签，根据标签名称来获取元素
        var divs = document.getElementsByTagName('div')//由于得到的是数组，所以需要通过for循环来遍历数组
        for (let i = 0;i < divs.length;i++) {
            const div = divs[i];//拿到一个个的div元素
            div.innerHTML += "very good";//根据查阅HTML操作手册得知，div的这个属性可以改变文本内容
        }
        //然后改变verygood的颜色为红色，用<font color = 'red'></font>可以实现，将其把verygood包裹起来
        var divs = document.getElementsByTagName('div')//由于得到的是数组，所以需要通过for循环来遍历数组
        for (let i = 0;i < divs.length;i++) {
            const div = divs[i];//拿到一个个的div元素
            div.innerHTML += "<font color = 'red'>very good</font>";//根据查阅HTML操作手册得知，div的这个属性可以改变文本内容
        }
        //3、使所有的复选框呈现选中状态
        //根据name属性来获取
        var ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            const check = ins[i];//查看官方文档找到check属性：设置checkbox被选中
            check.checked = true;//选中状态
        }
  
    </script>
</body>
</html>
posted @ 2025-05-11 22:07  琬六岁  阅读(15)  评论(0)    收藏  举报