总结
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>
var btnObj=document.getElementById("bridge");
btnObj.onclick=function () {
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>
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>
</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>