（五）JavaScript——DOM和事件的简单学习

最新推荐文章于 2022-09-05 21:12:39 发布

顺毛黑起

最新推荐文章于 2022-09-05 21:12:39 发布

阅读量101

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Apikaqiu/article/details/111320234

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

DOM简单学习

```
  功能：控制html文档的内容
```

  代码：获取页面标签（元素）对象 Element
  			document.getElementById("id值")：通过元素的id获取元素对象

  操作Element对象：
  	1.修改属性值：
  			1.明确获取的对象是哪一个
  			2.查看API文档，找其中有哪些属性可以设置
  	2.修改标签体内容：
  			属性：innerHTML

事件简单学习

  概念：某些组件被执行了某些操作后，触发某些代码的执行

  如何绑定事件：
  	1.直接在html标签上，指定事件的属性（操作），属性值就是js代码。
  			1.事件：onclick---单击事件
  	2.通过js获取元素对象，指定事件属性，设置一个函数

案例–灯泡的开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img id="light1" src="light2.png">
</body>
<script>
    /*
        1.获取图片对象
        2.绑定单击事件
        3.每次点击切换图片
            *规则：如果灯是开的 on，切换图片为 off
                   如果灯是关的 off，切换图片为 on
             使用标记flag来完成

     */
    //1.获取图片对象
        var light1=document.getElementById("light1");
        var flag=true;//代表灯是灭的 off图片
    //2.绑定单击事件
        light1.onclick=function () {
            if (flag){//如果灯是开的，则灭掉
                light1.src="light1.png";
                flag=false;
            }else {
                //如果灯是灭的，则打开
                light1.src="light2.png";
                flag=true;
            }

        }
</script>
</html>

顺毛黑起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（五）JavaScript——DOM和事件的简单学习

DOM简单学习功能：控制html文档的内容代码：获取页面标签（元素）对象 Element document.getElementById("id值")：通过元素的id获取元素对象操作Element对象： 1.修改属性值： 1.明确获取的对象是哪一个 2.查看API文档，找其中有哪些属性可以设置 2.修改标签体内容：属性：innerHTML事件简单学习概念：某些组件被执行了某些操作后，触发某些代码的执行
复制链接

扫一扫

专栏目录