【前端】【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 de