前端DOM操作：点击鼠标切换事件

最新推荐文章于 2024-08-21 23:10:49 发布

TTLLZZHH

最新推荐文章于 2024-08-21 23:10:49 发布

阅读量1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43797908/article/details/91873989

版权

前端专栏收录该内容

62 篇文章 0 订阅

订阅专栏

DOM也就是document文档的意思，标准叫法是文档对象模型。

一个HTML可以看成是一个文档，这个文档就是一个对象，那么我们可以通过DOM 来操作HTML页面中的所有的元素（element）

getElementById:得到元素的属性通过ID获取，onclick鼠标点击

//点击按钮显示图片
<body>
<input type="button" id="bt" value="显示图片"/><br />
<img src="" alt="" id="im">
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("im").src="image/哈哈欧巴.jpg";
    };
</script>
</body>

如果是双标签，双标签里面的内容可以通过innerText进行修改

<body>
<!--点击按钮修改文本内容-->
<input type="button" id="bt" value="修改文本内容"/><br />
<p id="p1">我不是文本</p>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("p1").innerText="我是文本";
    };
</script>
</body>

<body>
<!--点击按钮修改超链接地址和内容-->
<input type="button" id="bt" value="修改超链接"/><br />
<a href="http://www.baidu.com" id="a1">百度</a>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("a1").href="http://www.sina.com";
        myGetElementById("a1").innerText="新浪";
    };
</script>
</body>

<body>
<!--点击按钮修改图片的属性-->
<input type="button" id="bt" value="修改图片属性"/><br />
<img src="image/哈哈欧巴.jpg" alt="哈哈" title="钟国" id="im">
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("im").title="韩国艺人";
        myGetElementById("a1").alt="running man";
    };
</script>
</body>

<body>
<!--点击按钮修改所有p标签内容-->
<input type="button" id="bt" value="修改内容"/><br />
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        var pObjs=document.getElementsByTagName("p");
        for(var i=0;i<pObjs.length;i++){
            pObjs[i].innerText="2";
        }
    };
</script>
</body>

如果碰到相同的标签名但是type不同可以用if判断操作

<body>
<!--点击按钮修改所有文本框的值-->
<input type="button" id="bt" value="修改文本框值"/><br />
<input type="text" value=""/>
<input type="text" value=""/>
<input type="text" value=""/>
<input type="text" value=""/>
<input type="text" value=""/>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        var tpObjs=document.getElementsByTagName("input");
        for(var i=0;i<tpObjs.length;i++){
            if(tpObjs[i].type=="text"){
                tpObjs[i].value="傻瓜温达";
            }
        }
    };
</script>
</body>

<body>
<!--点击图片弹出对话框-->
<img src="image/哈哈欧巴.jpg" alt="" id="im">
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("im").onclick=function () {
       alert("这是哈哈");
    };
</script>
</body>

<body>
<!--点击按钮修改按钮属性-->
<input type="button" value="修改按钮属性" id="bt">
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
       this.value="已经修改过";
       this.type="text";
    };
</script>
</body>

<body>
<!--点击图片修改自身高度宽度-->
<img src="image/哈哈欧巴.jpg" width="300" height="300" alt="" id="im">
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("im").onclick=function () {
       this.width=100;
       this.height=100;
    };
</script>
</body>

排他：就是点击按钮之后，此按钮显示被点击了，在点击别的按钮得时候这个按钮显示没被点击，被点击得按钮显示被点击了

点击得时候把所有按钮value设置为没被点击,在设置被点击得按钮设置为被点击了

<body>
<!--按钮的排他功能-->
<input type="button" value="没被点击"/>
<input type="button" value="没被点击"/>
<input type="button" value="没被点击"/>
<input type="button" value="没被点击"/>
<input type="button" value="没被点击"/>
<input type="button" value="没被点击"/>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    var btObjs=document.getElementsByTagName("input");
    for(var i=0;i<btObjs.length;i++){
        btObjs[i].onclick=function () {
            for(var j=0;j<btObjs.length;j++){
                btObjs[j].value="没被点击";
            }
            this.value="被点击了";
        };
    }
</script>
</body>

<body>
<!--点击图片修改路径-->
<img src="image/哈哈欧巴.jpg" alt="" id="im">
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("im").onclick=function () {
        this.src="image/李光洙.jpg";
    };
</script>
</body>

如果属性和值是一样得话，比如checked=checked代表被选中，那么在JS中可以用checked=true来表示，没被选中就是false

<body>
<!--点击按钮选择性别-->
<input type="button" value="选择性别" id="bt" />
<input type="radio" value="1" id="ra1"/>男
<input type="radio" value="2" id="ra2"/>女
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("ra2").checked=true;
    };
</script>
</body>

对于文本域中得内容设置可以使用value也可以使用innertext；推荐用value

<body>
<!--点击按钮设置下拉菜单或文本域-->
<input type="button" value="设置下拉菜单/文本域" id="bt" />
<select name="" id="">
    <option value="1">1999</option>
    <option value="2">1111</option>
    <option value="3" id="3">2222</option>
</select>
<textarea name="" id="ta" cols="30" rows="10"></textarea>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("3").selected=true;
        //myGetElementById("ta").innerText="我是隔壁老王";
        myGetElementById("ta").value="我是隔壁老王";
    };
</script>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
<!--点击按钮设置div得style-->
<input type="button" value="设置div样式" id="bt" />
<div id="dv"></div>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        myGetElementById("dv").style.backgroundColor="green";
        myGetElementById("dv").style.width="300px";
        myGetElementById("dv").style.height="400px";
    };
</script>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
<!--点击按钮显示和隐藏div-->
<input type="button" value="显示" id="bt" />
<div id="dv"></div>
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        if(this.value=="显示"){
            myGetElementById("dv").style.display="block";
            this.value="隐藏";
        }else{
            myGetElementById("dv").style.display="none";
            this.value="显示";
        }
    };
</script>
</body>

使用类样式操作，如果class=“cls”就是关灯，黑色背景；如果class！=“cls”就是开灯，白色背景

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: black;
        }
    </style>
</head>
<body>
<!--点击按钮实现网页开关灯-->
<input type="button" value="开/关灯" id="bt" />
<script>
    function myGetElementById(id) {
        return document.getElementById(id);
    }
    myGetElementById("bt").onclick=function () {
        document.body.className=document.body.className?"":"cls";
    };
</script>
</body>