DOM的基本操作(二)

总结

1.凡是成对的标签，设置中间文本内容的时候，都是使用innerText这个属性
2.document.getElementsByTagName("标签的名字");返回的是一个伪数组,里面存储的是标签的名字;无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
3.在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
4.在表单标签中,如果属性和值只有一个,且是相同,那么在写js代码,DOM操作的时候,这个属性值,设置为布尔类型就可以了
5.html中属性和值是自己的,并且只有一个的,其实,可以只写这个属性,不用赋值
6.凡是css中的属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
7.在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用className

<!--先要有按钮,才能够获取,获取之后才能注册事件-->
<input type="button" value="按钮" id="btn">
<script>
document.getElementById("btn").onclick=function () {
    alert("我想和他一样，不顾那些所以");
}
</script>

<!--1.点击按钮显示图片:点击按钮的时候设置img标签的src属性有一个图片的路径-->
<input type="button" value="安河桥" id="bridge">
<img src="" alt="" id="image">
<script>
    // document.getElementById("bridge").οnclick=function () {
    //     document.getElementById("image").src="../image/1.gif";
    // }
    var btnObj=document.getElementById("bridge");
    //为按钮注册点击事件,添加事件处理函数
    btnObj.onclick=function () {
        //根据id获取图片的标签,设置图片的src属性值
        var imObj=document.getElementById("image");
        imObj.src="../image/1.gif";
        //设置图片的大小
        imObj.width="300";
        imObj.height="400";
    };
</script>

2.点击按钮,修改p标签的显示内容
<input type="button" value="就这样吧" id="btn">
<p id="p1">让我再看你一遍从南向北</p>
<script>
    //凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
    //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
    var obj=document.getElementById("btn");
    obj.onclick=function () {
        document.getElementById("p1").innerText="像是被五环路蒙住的双眼";
    }
</script>

<!--3.点击按钮修改a标签的地址和热点文字-->
<input type="button" value="就这样吧" id="btn">
<a href="http://www.baidu.com" id="a">百度</a>
<script>
    var obj=document.getElementById("btn");
    obj.onclick=function () {
        var obj1=document.getElementById("a");
        obj1.href="http://www.jd.com";
        obj1.innerText="京东";
    }
</script>

<!--4.点击按钮，修改多个p标签的内容-->
<input type="button" value="按钮" id="btn"/>
<div id="div">
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
</div>
<div id="div2">
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
    <p>如果再看你一眼，是否还会有感觉</p>
</div>
<script>
    // 方法一
    //document.getElementsByTagName("标签的名字");返回的是一个伪数组,里面存储的是标签的名字
    //无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
    // document.getElementById("btn").οnclick=function () {
    //     var pObjs=document.getElementsByTagName("p");
    //     console.log(pObjs);//HTMLCollection(5) [p, p, p, p, p]
    //     for(var i=0;i<pObjs.length;i++){
    //         为每个p标签,设置文字
    //         pObjs[i].innerText="陌生的城市啊，熟悉的角落里";
    //     }
    // }
    // 方法二
    // document.getElementById("btn").οnclick=function () {
    //     var pObjs=document.getElementById("div").getElementsByTagName("p");
    //     for (var i = 0; i < pObjs.length; i++) {
    //         pObjs[i].innerText = "陌生的城市啊，熟悉的角落里";
    //     }
    // }
</script>

<!--5.点击按钮，修改所有文本框的值-->
<input type="button" value="我想和你一样" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
    document.getElementById("btn").onclick=function () {
        var inputs=document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            if(inputs[i].type!=="button"){
                inputs[i].value="我想和你一样，不顾那些所以";
            }
        }
    }
</script>