前言：在《DOM编程艺术》一书中，作者给出了一个实例：创建一个图片库，其实功能很简单，就是点击某个列表项时，下方出现相应的图片以及图片说明（图片说明事先以title的形式写在HTML中），虽然是一个简单的例子，当时作者在书中循序渐进，不断的改善图片库中间引入各种知识点，真的是一本好书，在此对这个实例进行一些总结。
－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－
1.HTML部分
<h1>电影天堂</h1>
<ul>
<li>
<a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
</li>
<li>
<a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a>
</li>
<li>
<a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a>
</li>
<li>
<a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a>
</li>
</ul>
<!--占位符图片-->
<img id="placeholder" src="images/placeholder.jpg" alt="hehehe">
<!--一段描述-->
<p id="description">选择一张图片</p>2.CSS样式
h1{
color: #333;
}
a{
color: gray;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}3.js代码
//首先封装一个函数, 参数whicpic代表一个元素的节点，即指向某个图片的a元素
function showPic(whichpic){
//获取某个图片的href属性
var source = whichpic.getAttribute("href");
//获取占位符图片的节点
var placeholder = document.getElementById("placeholder");
//使用setAttribute对placeholder元素的src属性进行刷新
placeholder.setAttribute("src" , source);
//one more thing:在前换图片的时候，将占位符图片下面的文字内容切换为对应图片的title
//首先获取图片对应的title属性
var text = whichpic.getAttribute("title");
//获取图片描述的节点
var description = document.getElementById("description");
//实现文本的切换
//首先要获取到description中的文本，需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它
description.firstChild.nodeValue = text;
//也可以用firstchild：description.firstChild.nodeValue
}4.总结
1.首先获取图片的href属性：
whichpic.getAttribute("href")
2.接着获取占位符图片的节点： document.getElementById("placeholder")
3.然后设置占位符图片的src属性:
placeholder.setAttribute("src" , source)
4.接着对占位符图片下方的文字进行操作，把图片的title值赋值给<p>标签的nodeValue
var text = whichpic.getAttribute("title")var description = document.getElementById("description")description.firstChild.nodeValue = text
其中可以通过childNode获取节点的所有子节点，并且用nodeType属性进行判断：1代表元素节点、2代表属性节点、3代表文本节点，因为本例<p>标签只有一个子节点，所以可以用fistChild，或者childNode[0]来获取，获取节点后再用nodeValue获取节点的属性值。
5.添加onclick处理事件
这只是初级的一个例子，所以函数处理事件嵌套在HTML代码中，并且为了阻止点击链接的默认行为（跳转到一个新的页面），后面还要返回给它一个false。
<li>
<a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
</li>6.不足
点击事件绑定在HTML代码中，很笨重，下一篇中将做升级。
7.老规矩，贴出完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<style>
h1{
color: #333;
}
a{
color: gray;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}
</style>
</head>
<body>
<h1>电影天堂</h1>
<ul>
<li>
<a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
</li>
<li>
<a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a>
</li>
<li>
<a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a>
</li>
<li>
<a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a>
</li>
</ul>
<!--占位符图片-->
<img id="placeholder" src="images/placeholder.jpg" alt="hehehe">
<!--一段描述-->
<p id="description">选择一张图片</p>
<!--以下是js代码-->
<script>
//首先封装一个函数, 参数whicpic代表一个元素的节点，即指向某个图片的a元素
function showPic(whichpic){
//获取某个图片的href属性
var source = whichpic.getAttribute("href");
//获取占位符图片的节点
var placeholder = document.getElementById("placeholder");
//使用setAttribute对placeholder元素的src属性进行刷新
placeholder.setAttribute("src" , source);
//one more thing:在前换图片的时候，将占位符图片下面的文字内容切换为对应图片的title
//首先获取图片对应的title属性
var text = whichpic.getAttribute("title");
//获取图片描述的节点
var description = document.getElementById("description");
//实现文本的切换
//首先要获取到description中的文本，需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它
description.firstChild.nodeValue = text;
//也可以用firstchild：description.firstChild.nodeValue
}
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。