通过一个图片库实例加深对DOM的掌握。
当点击一个链接后不跳转窗口显示并能看见图片清单，相对应的，
图片的描述也会改变。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a>
</li><!--当点击链接时调用showPic函数，但此时链接本身也会触发，showPic函数执行后返回一个false则可以阻止链接触发
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<!--图片占位符，图片将会显示在这里-->
<p id="description">Choose an image.</p>
<!--文本站位符-->
</body>
</html>
JS部分
functions showPic(whichpic){
//传入点击的那个链接节点
var source=whichpic.getAttribute("href");
//获取这个节点的href属性，保存在source中
var placeholder=documnet.getElementById("placeholder")
//获取图片占位符
placeholder.setAttribute("src" source);
//修改它的src属性的对应值,则选中的图片就会显示在站位符所在位置
var text=whichpic.getAttribute("title');
//获取选中链接的title值
var descriptipn=documnet.getElementById("description");
获取文本站位符
description.firstChild.nodeValue=text;
修改文本的第一个子节点也就是文本节点的值。
}现在这个功能基本上实现了，但其实有很多地方需要改进。部分JavaScript代码写到了html中，这一点上没有做到样式分离。从性能上考虑，减少不必要的DOM操作以及代码量都可以使网页性能更佳。（代码可以保有两份，一份便于修改，另一份用代码压缩工具压缩后投入使用）
改进后的html已经没有JavaScript部分了
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>JS新增函数部分
function prepareGallery() {
//为onclick添加点击函数
var gallery = document.getElementById("imagegallery");
//获取ul
var links = gallery.getElementsByTagName("a");
//获取全部a标签
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
showPic(this);点击到某标签时就触发这个标签的showPic
return false；返回一个false，阻止标签本身链接触发
}
}
}
window.onload=preparGallery;这样就算是分离了html与js。
ps：键盘事件没必要写；如果有多个onload事件，可以使用addLoadEvent函数；没有写检查代码，我相信现在的浏览器是强大的：）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
