JavaScript----DOM和事件的简单学习

##DOM简单学习

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

　　*  代码：获取页面标签（元素）对象：Element

　　　　*  document.getElementById("id值"):通过元素id获取元素对象

　　*  操作Elements对象：

　　　　1、修改属性值：

　　　　　　1、明确获取的对象是哪一个？

　　　　　　2、查看API文档，找其中有哪些属性可以设置。

　　　　2、修改标签内容：

　　　　　　*  属性：innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>
    <script>
        //通过id获取元素对象
        window.onload = function() {
            /*let light = document.getElementById("light");
            alert("我要换图片了...");
            light.src = "imgs/open.gif";*/
            let title = document.getElementById("title");
            alert("我要换内容了...")
            title.innerHTML = "世界第一中国队";
        }
    </script>
</head>
<body>
<h1 id="title">悔创阿里杰克马</h1>
<img id="light" src="imgs/close.gif">
</body>
</html>

##事件简单学习

　　*  功能：某些组件被执行了某些操作后，出发某些代码的执行。

　　　　*  造句：xxx被xxx，我就xxx

　　　　　　*  我方水晶被摧毁后，我就责备队友。

　　　　　　*  敌方水晶被摧毁后，我就夸奖自己。

　　*  如何绑定事件

　　　　1、直接在html标签上，指定事件的属性（操作），属性值就是js代码。

　　　　　　1、事件：onclick：单击事件

　　　　2、通过JS获取元素对象，指定时间属性，设置一个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script>
        //1
            function clickMe() {
                alert("我被点了")
            }
            //2
        var light2 = document.getElementById("light2");
        light2.onclick = clickMe();
    </script>
</head>
<body>
<img id="light" src="imgs/close.gif" onclick="clickMe();">
<img id="light2" src="imgs/close.gif">
</body>
</html>

　　*  案例：模拟电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
    <script>
        window.onload = function () {
            var light = document.getElementById("light");
            var flag = false;//代表灯是灭的
            light.onclick = function () {
                if (flag) {
                    light.src = "imgs/close.gif";
                    flag = false;
                } else {
                    light.src = "imgs/open.gif";
                    flag = true;
                }
            }
        }
    </script>
</head>
<body>
<img id="light" src="imgs/close.gif">
</body>
</html>

 

Posted on 2020-02-17 00:33  夏洛蒂的手稿  阅读(130)  评论(0)  编辑  收藏  举报