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 @ 2022-08-04 17:52  baimingze  阅读(28)  评论(0)    收藏  举报