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

DOM简单学习

功能:控制html文档的内容

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

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

 操作Element对象：

1.修改属性值：

  • 明确获取的对象是哪一个
  • 查看API文档 找其中有哪些属性可以设置

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM获取元素对象</title>
        
    </head>
    <body>
        
        <img id="light" src="./img/图片.jpeg">
    
        <script>
            var light=document.getElementById("light")
            alert("我要换图片")
            light.src="./img/QQ截图20220802162029.png"
            
            
        </script>
        
    </body>
</html>
复制代码

运行结果

2.修改标签体内容

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM获取元素对象</title>
    </head>
    <body>
        
        <h1 id="title">首付款哈数据库返回集合</h1>
            
        <script>
            
            
            var title=document.getElementById("title")
            alert("我要换文档")
            title.innerHTML="奇闻说今古";
        </script>
        
    </body>
</html>
复制代码

运行结果

 

 

 事件的简单学习

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

  • 造句：xxxx被xxxx 我就xxx
    • 我方水晶被摧毁后 我就会责备队友
    • 敌方水晶被摧毁后 我就夸奖自己
  • 如果绑定事件
    • 直接在html标签上 指定事件的属性（操作） 属性值就是js代码
      • 事件：onclick---单击事件
    • 通过js获取元素对象 指定事件属性 设置一个函数

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function fun(){
                alert('我被点了')
            }
            function fun2(){
                alert('我被点了')
            }
            var light=document.getElementById("light");
            light.onclick=fun2();
        </script>
    </head>
    <body>
        <img src="img/图片.jpeg" onclick="fun()">
        <img id="light" src="img/QQ截图20220802162029.png">
    </body>
</html>
复制代码
posted @   baimingze  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
· DOM操作
· DOM_Element元素对象和Node节点对象
· DOM简单学习以及事件简单学习
· DOM简单学习和事件简单学习
· DOM简单学习和事件简单学习
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示