DOM与事件入门

于 2021-05-17 15:30:46 发布
阅读量394 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZziQon/article/details/116933681
版权
  • DOM入门
    功能： 控制HTML文档的内容
    代码： 获取页面标签（元素）对象Elementdocument.getElementById("id值"); //通过元素id获取元素对象
    write()–向文档写 HTML 表达式 或 JavaScript 代码
    title–返回网页的标题
    id–设置或返回元素的id
    innerHTML–设置或返回元素的内容,相对于innerText，innerHTML可以解析HTML代码
    操作Element对象：
    1.设置属性值
    2.修改标签内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="img/5-1.jpg" id="light">
    <h1 id="h1">牛马操作</h1>

    <script>
        //获取元素对象
        /*var light = document.getElementById("light");
        alert("准备换图，改变src连接对象");
        light.src = "img/7-1.jpg";*/

        //获取h1标签对象
        var title = document.getElementById("h1");
        //修改内容
        title.innerHTML = "完美操作";
    </script>
</body>
</html>
  • 事件简单学习
    功能： 某些组件执行了某些操作后，触发某些代码的执行
    绑定事件：
    1.直接在HTML标签上指定事件的属性，js就是属性值（onclick------单击事件），耦合性太高，不够灵活
    2.通过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        //方式1
        function fun(){
            alert("真有意思")
        }
        //方式2
        var img2 = document.getElementById("light2");
        img2.onclick = fun();
    </script>
</head>
<body>
    <img src="img/5-1.jpg" id="light" onclick="alert('fun();')">
    <img src="img/7-1.jpg" id="light2">
</body>
</html>
  • 案例（单击换图）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="img/5-1.jpg" id="light">

    <script>
        var light = document.getElementById("light");
        var flag = false; //表示图5-1

        light.onclick = function (){
            if(flag){
                //当前图片是7-1
                light.src = "img/5-1.jpg"
                flag = false;
            }else {
                light.src = "img/7-1.jpg"
                flag = true;
            }
        }
    </script>
</body>
</html>
ZziQon
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值