【前端】【JS】前端学习之路（六）：DOM练习（一）（排他功能/innerText&value/className改变类样式）

1.点击图片改变图片和文字

<div id="dv1">
    <P>你是谁</P>
    <P>你是谁</P>
    <P>你是谁</P>
    <P>你是谁</P>
    <P>你是谁</P>
    <P>你是谁</P>
    <P>你是谁</P>
</div>
<div id="dv2">
    <P>我是谁</P>
    <P>我是谁</P>
    <P>我是谁</P>
    <P>我是谁</P>
    <P>我是谁</P>
    <P>我是谁</P>
    <P>我是谁</P>
</div>

    <img src="images/1.jpg" alt="" title="我也不知道" id="img" width="300"/>
    <a href = "http://www.baidu.com" id="ak" TARGET="_blank">这是百度</a>

        var ButObj = document.getElementById("img");

        ButObj.onclick = function () {
            var aObj = document.getElementById("ak");
            var pObj = document.getElementById("dv2").getElementsByTagName("p");
            for(var i = 0; i<pObj.length; i ++){
                pObj[i].innerText="我也不知道我是谁";
            }
            aObj.href = "http://www.bilibili.com";
            aObj.innerText = "这是B站";
            this.src = "images/2.jpg";
            this.title = "我知道了";
        };

 

点击前：

 

点击后：

2.点击按钮修改所有文本框内容

<input type="button" value="修改文本框内容" id="btn"/>

<br/>
<input type="text" value="The violent delights must has violent ends" />
<input type="text" value="The violent delights must has violent ends" />
<input type="text" value="The violent delights must has violent ends" />
<input type="text" value="The violent delights must has violent ends" />
<input type="text" value="The violent delights must has violent ends" />
<input type="text" value="The violent delights must has violent ends" />

<script>
    function my$(id) {
        return document.getElementById(id);
    }


    var ButObj = my$("btn");

    ButObj.onclick = function () {
        var TexObj = document.getElementsByTagName("input");
        for (var i = 0; i < TexObj.length; i++) {
            if (TexObj[i].type != "button") {
                TexObj[i].value = "The game of throne";
            }
        }
    };
</script>

 

 

 

点击前：

点击后：

 

3.按钮的排他功能

<!--点击一个按钮  再点其他按钮会复原-->
<!--原理：每次点击之前都实行一次将所有按钮都归为“没怀孕”的操作，然后再将被点击到的那一个按钮改为已被点击的样子-->

<input type="button" value="没怀孕" name="测试" />
<input type="button" value="没怀孕" name="测试" />
<input type="button" value="没怀孕" name="测试" />
<input type="button" value="没怀孕" name="测试" />
<input type="button" value="没怀孕" name="测试" />
<input type="button" value="没怀孕" name="测试" />

<script>
    var ButObj = document.getElementsByTagName("input");

    for (var i = 0; i < ButObj.length; i++) {
        ButObj[i].onclick = function () {
            for (var j = 0; j < ButObj.length; j++) {
                //在这将所有的按钮复原为没怀孕
                ButObj[j].value = "没怀孕";
            }
            //在这里将被点中的那个按钮设为怀孕了
            this.value = "怀孕了";
        }
    }
</script>

点击前：

点击后：

 

4.点击按钮自动选择性别/兴趣

<input type="button" value="填充性别" id="btn1"/>
<input type="radio" value="男" name="sex" id="sex1"/>男
<input type="radio" value="女" name="sex" checked="checked"/>女
<input type="radio" value="保密" name="sex"/>保密

<br/>

<input type="button" value="填充兴趣" id="btn2"/>
<input type="checkbox" value="1" name="habit" id="hab1" checked="checked"/>吃饭
<input type="checkbox" value="1" name="habit"/>睡觉
<input type="checkbox" value="1" name="habit" id="hab2"/>打豆豆

<script>
    function my$(id) {
        return document.getElementById(id);
    }


    var SexBut = my$("btn1");

    SexBut.onclick = function () {
        var sex = document.getElementsByTagName("input");

        for (var i = 0; i < sex.length; i++) {
            if (sex[i].type == "radio") {
                var sex1 = my$("sex1");

                sex1.checked = true;
            }
        }
    };

    var HabBut = my$("btn2");

    HabBut.onclick = function () {
        var sex1 = document.getElementsByTagName("input");
        for (var j = 0; j < sex1.length; j++) {
            if (sex1[j].type == "checkbox") {
                var hab1 = my$("hab1");
                var hab2 = my$("hab2");

                hab1.checked = true;
                hab2.checked = true;
            }
        }
    }

</script>

 

点击前：

 

点击后：

 

5.选择下拉框和文本域的相关属性设置

<input type="button" value="点菜" id="btn"/>

<select name=" " id="ss">
<option value="1">凉拌黄瓜</option>
<option value="2">清蒸鲈鱼</option>
<option value="3">白灼娃娃菜</option>
<option value="4" id="op1">番茄炒鸡蛋</option>
</select>

<input type="button" value="用innertext改变文字" id="btn2"/>
<input type="button" value="用value改变文字" id="btn3"/>
<textarea cols="30" rows="20" id="text">
1.水电费是按什么价算的
2.快递的寄送去哪里
3.用的是wifi还是网线
4.平时晾衣服的地方在哪里
5.平时的作息习惯是怎么样的
6.冰箱是公用的吗
</textarea>

<script>
    var ButObj = my$("btn");

    ButObj.onclick = function () {
        var optObj = my$("op1");

        optObj.selected = true;
    };

    var ButObj2 = my$("btn2");

    ButObj2.onclick = function () {
        var textObj = my$("text");

        textObj.innerText = "嘿嘿,我是用innerText改变文字的，在Element中可以看到变化哟";
    };

    var ButObj3 = my$("btn3");

    ButObj3.onclick = function () {
        var textObj = my$("text");

        textObj.value = "哼,我是用value改变文字的，在Element中可看不到变化！";
    };

</script>

点击前：

点击后：

 

6.点击按钮设置div的格式

    <style>
        .cls {

            display: none;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .light {
            background-color: black;
        }

    </style>

<input type="button" value="点击我修改div的样式" id="btn"/>
<div id="dv">

</div>

<!--(1)普通写法:-->
<script>

    var dvObj = my$("dv");
    var buObj = my$("btn");

    buObj.onclick = function () {
        dvObj.style.width = "300px";
        dvObj.style.height = "300px";
        dvObj.style.backgroundColor = "pink";
    }


</script>

 

<!--(2)class（类样式）写法 ：-->
<!--已经在<style></style>中说明了格式-->
<input type="button" value="点击我用class修改样式" id="btn1"/>
<div id="dv2">

</div>
<script>
    var ButObj = my$("btn1");
    var divObj = my$("dv2");

    ButObj.onclick = function () {
        divObj.className = "cls";
    }

</script>

点击前：

点击后：