DOM的基本操作(三)

<!--&lt;!&ndash;1.点击每个图片弹出对话框&ndash;&gt;-->
<img src="../image/1.jpg" alt=""/>
<img src="../image/2.jpg" alt=""/>
<img src="../image/3.jpg" alt=""/>
<script>
    //根据标签的名字获取图片标签,分别注册点击事件
    var images = document.getElementsByTagName("img");
    //循环遍历数组,获取每个图片标签,注册点击事件,添加事件处理函数
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = function () {
            alert("斑马，斑马，你不要睡着啦，让我看看你受伤的尾巴");
        }
    }
</script>

<!--2.点击按钮改变各个属性-->
<input type="button" value="按钮" id="btn">
<script>
    //在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
    var obj=document.getElementById("btn");
    obj.onclick=function () {
        this.type="text";
        this.value="不负韶华";
        this.id="id";
    }
</script>

<!--4.排他功能的实现-->
<input type="button" value="爱过">
<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>
    //获取所有的按钮,分别注册点击事件
    var objs=document.getElementsByTagName("input");
    //为每个按钮都要注册点击事件
    for(var i=0;i<objs.length;i++){
        objs[i].onclick=function () {
            //把所有的按钮的value值设置为默认的值:爱过
            for(var j=0;j<objs.length;j++){
                objs[j].value="爱过";
            }
            //当前被点击的按钮设置为:不曾爱过
            this.value="不曾爱过";
        };
    }
</script>

<!--6.点击按钮修改图片-->
<input type="button" value="按钮" id="kj">
<img src="../image/1.gif" alt="" id="im">
<script>
    // document.getElementById("kj").οnclick=function () {
    //     document.getElementById("im").src="../image/1.jpg";
    // }
    function myGet(id) {
        return document.getElementById(id);
    }
    myGet("kj").onclick=function () {
        myGet("im").src="../image/1.jpg";
    }
</script>

下面这些代码首先引入了一个JavaScript文件

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {HTMLElement} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}

<!--7.点击按钮修改性别和兴趣-->
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad"/>女
<input type="radio" value="3" name="sex"/>保密
<script>
    //规律:在表单标签中,如果属性和值只有一个,且是相同,那么在写js代码,DOM操作的时候,这个属性值,设置为布尔类型就可以了
    my$("btn1").onclick=function () {
        my$("rad").checked=true;
    };
</script>
<br />
<input type="button" value="选择兴趣" id="btn2"/>
<input type="checkbox" value="1" name="w" />吃饭
<input type="checkbox" value="2" name="w" />睡觉
<input type="checkbox" value="3" name="w" id="ck1" />打豆豆
<input type="checkbox" value="4" name="w" />打篮球
<input type="checkbox" value="5" name="w" />打足球
<input type="checkbox" value="6" name="w" id="ck2" />打铅球
<script>
    my$("btn2").onclick=function () {
        my$("ck1").checked=true;
        my$("ck2").checked=true;
    };
</script>

<textarea name="" id="tt" cols="30" rows="10" readonly >
   其实都没有
</textarea>
<input type="button" value="注册" id="btn"/>
<script>
    //disabled=====>这个属性是禁用的意思,
    //html中属性和值是自己的,并且只有一个的,其实,可以只写这个属性,不用赋值
    my$("btn").onclick=function () {
        my$("tt").value="嘎嘎";   //推荐用value,因为看成了是表单的标签
        //my$("tt").innerText="哈哈";
    };
</script>