626 DOM简单学习 and 627 时间简单学习

DOM简单学习

　　功能：控制HTML文章的内容

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

　　　　document.getElemenctById(id值)：通过元素的id获取元素的对象

　　操作：Element对象：

　　　　1.修改属性值

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

　　　　　　2.查看API文档，找其中有那些属性可以设置

　　　　2.修改标签体内容：

　　　　　　属性：innerHTML

　　　　　　1.获取元素内容

　　　　　　2、使用innerHTML属性修改标签内容

<body>
        <!--获取指定图片 并设置id指定位置-->
        <img id="light" src="img/off.gif">
        <!--编写标签内容 并设置id指定位置-->
        <h1 id="title">大热蒙</h1>


        <script>
            /*// 通过id获取指定元素
            let light = document.getElementById("light");
            // 弹窗显示
            alert("嘿那边那小子开下灯");
            // 更换图片, 修改属性值
            light.scr = "img/on.gif";*/

            //获取和h1标签对象
            let title  = document.getElementById("title");
            //弹窗显示
            alert("啊对对对对")
            //修改内容
            title.innerText = "你真热蒙还是假热蒙了"
        </script>

 事件简单学习

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

　　　　1.事件：conclick--- 单击事件

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

 

<body>
<!--指定图片路径 并指定位置和 指定函数-->
    <img src="img/off.gif" id="light1" onclick="fun();">
<!--指定图片路径 并指定位置-->
    <img src="img/on.gif" id="light2">

    <script>
        <!--函数-->
        function fun() {
            //弹窗显示
            alert('站起来那个谁');
            alert('那个谁你也站');
        }
        <!--函数-->
        function fun2 () {
            //弹窗显示
            alert('还有你那谁说你呢');
        }

        //获取light2对象
        let light2 = document.getElementById("light2");
        //绑定事件
        light2.onclick = fun2;
    </script>

 

posted @ 2022-10-26 10:07  ja不会va  阅读(29)  评论(0)    收藏  举报