七、DOM、事件简单学习

最新推荐文章于 2024-07-30 10:56:44 发布

王大全

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量323

点赞数

分类专栏： JavaWeb学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36599530/article/details/122543288

版权

JavaWeb学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.DOM对象

功能：控制html文档的内容
代码：获取页面标签（元素）对象Element；

通过元素id获取元素对象document.getElementById(“id值”)
修改属性值 : 明确对象，查看api文档可设置属性
修改标签体内容：innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charsset="UTF-8">
    <title>DOM对象</title>
</head>
<body>

    <h1 id="title">好好学习，天天向上</h1>
    <img id="light" src = "img/off.gif">
    //先加载img 后面script才能取到它
    <script>
      var light = document.getElementById("light");
      alert("换图片");
      light.src = "img/on.gif";

      document.getElementById("title");
      alert("换标题了"）;
      title.innerHTML="年少不知读书好"
    </script>
</body>
</html>

2.事件

功能：某些组件被执行了某些操作后，触发某些代码的执行
如何绑定事件：
1.直接在html标签上，指定事件的属性，属性值就是js代码如：onclick事件
2.通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charsset="UTF-8">
    <title>事件</title>
   
</head>
<body>
//实例1
 <img id="light" src="img/off.jpg" onclick="fun()">
 <img id="light2" src="img/off.jpg" >
  <script>
     //实例1
      function fun(){
        alert('我被点击了');
        alert('我又被点击了')
      }
       function fun2(){
        alert('干嘛老点呀');
      }
      //实例2
      var light2 = document.getElemengById("light2");
      light2.onclick=fun2;
    </script>
</body>
</html>

3.小案例（电灯开关）

获取图片对象
绑定单击事件
每次点击切换图片：灯开，切换灯关 || 灯关，切换灯开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charsset="UTF-8">
    <title>事件</title>
   
</head>
<body>
 <img id="light" src="img/off.jpg" >
 <script>
     var light = document.getElemengById("light");
     var flag = false;
     light.onclick = function(){
        if(flag){
           light.src = "img/off.gif";
           flag=false;
        }else{
           light.src = "img/on.gif";
           flag=ture;
        }
     }
 </script>
</body>
</html>

王大全

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七、DOM、事件简单学习

1.DOM对象功能：控制html文档的内容代码：获取页面标签（元素）对象Element；通过元素id获取元素对象document.getElementById(“id值”)修改属性值 : 明确对象，查看api文档可设置属性修改标签体内容：innerHTML<!DOCTYPE html><html lang="en"><head> <meta charsset="UTF-8"> <title>DOM对象&lt
复制链接

扫一扫

专栏目录