首页 > 其他分享> > DOM简单学习和事件的简单学习

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

2022-08-04 18:02:19 作者：互联网

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>

标签：DOM,light,代码,alert,学习,getElementById,简单,document
来源： https://www.cnblogs.com/aimz01/p/16551128.html