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>
    //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 divsi = divs[i];
        divsi.innerHTML+="<font color='red'>very godd<font>";
        
    }


    //3. 使所有的复选框呈现选中状态
    var hobbys=document.getElementsByName('hobby');
    for (let i = 0; i < hobbys.length; i++) {
        const hobby = hobbys[i];
        hobby.checked=true;
        
    }

</script>
</html>
相关推荐
2601_9620715714 小时前
【Java报错已解决】org.springframework.beans.factory.BeanCreationException
java·开发语言
支支დ14 小时前
VO by Vercel 前端特定优势:为什么它是构建 AI 应用的新范式
前端·人工智能
香芋芋圆14 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF15 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
淡海水15 小时前
07-04-并发-ConcurrentBag-T-工作窃取WorkStealing算法
开发语言·算法·c#·bag·concurrent·workstealing
宿67415 小时前
vue3-async
前端·javascript·vue.js
CS_Zero15 小时前
C语言sizeof是函数吗?
c语言·开发语言
YXWik615 小时前
记录前端请求接口在浏览器请求响应的Preview和Response展示的一样的问题
前端
2501_9289962216 小时前
GPT-4o换DeepSeek迁移成本多少?中科热备解析API聚合平台技术账本
前端·数据库·人工智能
东风破_16 小时前
从跨域到 WebSocket:前端跨域方案、SSE 与双向实时通信详解
前端·后端