DOM操作练习
举例1：点击按钮时，显示和隐藏盒子。
代码实现：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>button {margin: 10px;}div {width: 200px;height: 200px;background-color: pink;}.show {display: block;}.hide {display: none;}</style></head><body><button id="btn">隐藏</button><div>生命壹号</div><script>//需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。//步骤：//1.获取事件源和相关元素//2.绑定事件//3.书写事件驱动程序//1.获取事件源和相关元素var btn = document.getElementById("btn");var div1 = document.getElementsByTagName("div")[0];//2.绑定事件btn.onclick = function () {//3.书写事件驱动程序//判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。//反之，则显示，并修改按钮内容为隐藏if (this.innerHTML === "隐藏") {div1.className = "hide";//修改按钮上的文字（innerHTML）btn.innerHTML = "显示";} else {div1.className = "show";//修改按钮上的文字（innerHTML）btn.innerHTML = "隐藏";}}</script></body></html>
代码解释：
当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。
另外，这里用到了innerHTHL属性，它可以修改按钮上显示的文字。
代码最终显示的效果如下：
20180127_1518.gif
举例2：美女相册
这里推荐一个网站：
- 占位图片生成的在线网站：https://placeholder.com/
好处是：素材做出来之前，先留出空位，方便以后换图。比如http://via.placeholder.com/400x300这个链接可以生成400*300的占位图片。
需求：
- （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
- （2）让p标签的innnerHTML属性值，变成a标签的title属性值。
为了实现美女相册，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<a href="#">注册</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="美女A">
<img src="image/1-small.jpg" width="100" alt="美女1"/>
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
<img src="image/2-small.jpg" width="100" alt="美女2"/>
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
<img src="image/3-small.jpg" width="100" alt="美女3"/>
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
<img src="image/4-small.jpg" width="100" alt="美女4"/>
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="image/placeholder.png" width="450px"/>
<p id="des">选择一个图片</p>
<script>
//需求：
//（1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
//（2）让p标签的innnerHTML属性值，变成a标签的title属性值。
//1.获取事件源和相关元素
//利用元素获取其下面的标签。
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a"); //获取ul中的超链接<a>
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2.绑定事件
//以前是一个一个绑定，但是现在是一个数组。我们用for循环绑定
for (var i = 0; i < aArr.length; i++) {
aArr[i].onclick = function () {
//3.【核心代码】书写事件驱动程序：修改属性值
img.src = this.href; //this指的是函数调用者，和i并无关系，所以不会出错。
// img.src = aArr[i].href; 注意，上面这一行代码不要写成这样
des.innerHTML = this.title;
return false; //return false表示：阻止继续执行下面的代码。
}
}
</script>
</body>
</html>
代码解释：
（1）获取事件源：我们通过ul.getElementsByTagName("a")来获取ul里面的a元素。
（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定
（3）【重要】书写事件驱动程序：这里是用img.src = this.href，而不是用img.src = aArr[i].href。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。
（4）代码的最后一行：return false表示：阻止继续执行下面的代码。
实现的效果如下：
20180127_1630.gif
工程文件：
若有收获，就点个赞吧
0 人点赞
