DOM的简单入门

最新推荐文章于 2023-12-28 14:40:45 发布

1凌霄1

最新推荐文章于 2023-12-28 14:40:45 发布

阅读量2.6k

点赞数 1

分类专栏： Java 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_60528766/article/details/122833515

版权

Java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这一篇是关于DOM的简单入门,后续会发BOM和DOM的详细笔记

*通过document.getElementById获取id从而获取元素对象

<!DOCTYPE html>
<html lang>
<head>
    <meta charset="UTF-8">
</head>
<body>
<img id="light" src="img/off.gif">
<script>
    //通过document.getElementById获取id从而获取元素对象
    var light=  document.getElementById("light");
    alert("我要开灯啦!");//alert有阻塞效果
    light.src="img/on.gif";//转换照片
</script>
</body>
</html>

*通过DOM事件将照片进行替换

事件的简单学习:
            * 方法一:(但是有增强了耦合性)
                   <img id="light" src="img/off.gif" οnclick="on();" >
            * 方法二:(通过id来绑定属性)
                    <img id="light1" src="img/off.gif" >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

      <img id="light" src="img/off.gif" onclick="on();" >
      <img id="light1" src="img/off.gif" >
<script>

    function on(){
        alert('我被点了');
    }
    function on1(){
        alert('我又被点了');
    }
    var light11=document.getElementById("light1");
    light11.onclick=on1;
</script>
</body>
</html>

*做一个点击开关灯泡的小案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>灯泡开关</title>
</head>

<body>
     <img id="light" src="img/off.gif">

<script>


    var light=document.getElementById("light");
    var flag=false;
    light.onclick= function click(){
       if(flag){
           light.src="img/off.gif";
           flag=false;
       }else {
           light.src="img/on.gif";
           flag=true;
       }


    }

</script>
</body>
</html>