DOM简单学习以及事件简单学习

DOM简单学习

功能：控制html文档的内容

代码：获取页面标签(元素)对象  Element

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

操作Element对象：

　　1.修改属性值：

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

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

　　2.修改标签内容：

　　　　属性：innerHTML

　　　　1.获取元素对象

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

复制代码
<body>

    <img src="img/hot_tel.jpg" id="light">
    <h1 id="title">郭伟明</h1>

    <script>
        //通过id获取元素对象
        var light = document.getElementById("light");
        alert("我要换图片了");
        light.src = "img/icon_2.jpg";

        //获取h1标签对象
        var title = document.getElementById("title");
        alert("我要换内容了")
        title.innerHTML = "郭伟明老婆";
    </script>
</body>
复制代码

 

 

事件简单学习

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

　　造句：xxx被xxx，我就xxx

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

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

如何绑定事件

　　1.直接在html标签上，指定事件的属性，属性值就是js代码

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

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

复制代码
<body>
    <img src="img/icon_2.jpg" onclick="alert('点我干哈')">

    <img src="img/off.gif" onclick="fun()">

    <img id="light2" src="img/off.gif" >

    <script>

        function fun() {
            alert("我被点了");
        }

        function fun2(){
            alert("老点我干哈");
        }

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


    </script>
</body>
复制代码

 

posted @   monkey大佬  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
· DOM_Element对象以及Node对象
· DOM_Document对象获取Element方法以及创建DOM对象
· DOM简单学习和事件简单学习
· DOM简单学习、事件简单学习
· DOM简单学习以及事件简单学习
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示