控制灯的亮灭

DOM 简单介绍与事件简单介绍

DOM：控制html文档的内容

• 代码：获取页面标签（元素）对象 Element
  • document.getElementById(“id值”);
    *操作Element对象：
• 1. 设置属性值：
  • 1. 明确获取的对象是哪一个？
  • 2. 查看api文档，找其中有哪些属性可以设置。

<img id= "light" src="../img/off.gif">
    <script>
        // 通过id获取元素对象
        var light = document.getElementById("light");
        alert("点击图片");
        light.src="../img/on.gif";
    </script>

• 2. 修改标签体内容：
  • 1. 属性： innerHTML

事件简单学习

• 功能：某些组件被执行了某些操作，触发了某些代码的执行
• 如何绑定事件
  • 1. 直接在html标签上，指定事件的属性（操作），属性值就是js的代码
    • 1. 事件：onclik------> 单击事件

<script>
        function  fun() {
            alert("我被点了")
        }
    </script>
   <img src="../img/off.gif" onclick="fun();">  // 耦合度太高 

• • 2. 通过js获取元素对象，指定事件属性，设置一个函数

 <img id="light2" src="../img/off.gif">
   <script>
       function  fun() {
           alert("我被点了")
       }
       // 1.获取light2对象
       var light2 = document.getElementById("light2");
       // 2.绑定事件
       light2.onclick = fun;
   </script>

完成一个小案例

    <img id="light" src="../img/off.gif">
    <script>
        /**
         * 分析：
         *  1.获取图片对象
         *  2.绑定单机事件
         *  3.每次点击切换图片
         *      规则：如果灯是开的  on ，切换图片为 off
         *              如果灯是关的  off ，切换图片为 on
         *      使用标记flag来完成
         */
            // 1.获取图片对象
        var light = document.getElementById("light");
        var flag = false; // 代表灯是灭的，off图片
        // 2.绑定单机事件
        light.οnclick=function(){
                if (flag){  // 判断，如果灯开的，就关掉
                    light.src="../img/off.gif";
                    flag = false;
                }else{  // 判断，如果灯关的，就打开
                    light.src="../img/on.gif";
                    flag = true;