通过这个简单例程你可以联系以下一些知识：
这是一个非常简单的小例程，如果您是刚刚学习前端，非常适合练习。花费20-30分钟的时间，您将掌握包括但不仅仅包括以下前端知识中非常重要的知识点。
DOM的几种简单操作
- getElementById
- getElementsByTagName
- getElementsByClassName
- getAttribute
- setAttribute
DOM提供的几个新属性
- ChildNodes
- nodeType
- nodeValue
- firstChild
- lastChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style type="text/css">
body{
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
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;
}
img{
display:block;
clear:both;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/1.jpg" title="1" onclick="showPic(this); return false;">11111</a>
</li>
<li>
<a href="images/2.jpg" title="2" onclick="showPic(this); return false;">22222</a>
</li>
<li>
<a href="images/3.jpg" title="3" onclick="showPic(this); return false;">33333</a>
</li>
<li>
<a href="images/4.jpg" title="4" onclick="showPic(this); return false;">44444</a>
</li>
</ul>
<img id="placeholder" width="500px" height="300px" src="images/image.JPG" alt="my image gallery" />
<p id="description">Choose an image</p>
</body>
<script>
function showPic(whichpic){
document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute("href"));
var text = whichpic.getAttribute("title");
document.getElementById("description").lastChild.nodeValue = "这是第 "+text+" 张图片";
}
</script>
</html>
值得一提的是，如果你想运行上述代码，需要在您的项目目录添加\images目录，并放置您喜欢的图片，并修改代码中图片的名称。这个图片库实际上还有许多地方值得改进，这里只是做简单的介绍，我想您写了一遍这个代码，您一定也会觉得它很简单，很想将它扩充，这很好，欢迎和我交流。
这个例子虽然简单，但是我想读者从中领悟这样一个道理：
达成目标的过程与目标本身同样重要。