【javascript】JS+DOM实现图片库（改进版）

一、它支持平稳退化吗

<li>
  <a href="images/fireworks.jpg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>
</li>

可以发现，在没有javascript的情况下，浏览器会沿着href属性给出的链接前进，虽然用户体验比用javascript的效果要逊色，但网页的基本功能未受到损害。即，它支持平稳退化。

二、它的javascript与HTML标签是分离的吗

<li>
  <a href="images/fireworks.jpg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>
</li>

很明显，onclick事件处理函数是直接插入到HTML中的，因此不是分离的。理想情况下，应该是在外部文件里完成加添onclick事件处理函数的工作。

首先需要把js代码移动HTML，但需要把js代码与HTML标签关联起来，可以分别给每个图片添加同一个class属性，但过于复杂。我们可以发现图片链接都包含在ul元素里，因此值需要给ul元素设置一个id。

		<ul id="imagegallery"> 
			<li>
				<a href="#" title="A fireworks display">Fireworks</a>
			</li>
			<li>
				<a href="images/coffee.jpg" title="A cup of coffee">Coffee</a>
			</li>
			<li>
				<a href="images/rose.jpg" title="A red rose">Rose</a>
			</li>
			<li>
				<a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
			</li>
		</ul>

1.添加事件处理函数
需要编写一个函数关联到onclick事件上。
【函数任务】

• 检查当前浏览器是否理解getElemenTagName
• 检查当前浏览器是否理解getElementsByTagName
• 检查当前页面是否存在一个id为imagegallery的元素
• 遍历imagegalley元素中所有的链接
• 设置onclick事件，让它有相关链接被点击时完成以下事件：把这个链接作为参数传递给showPic函数，并且取消链接被点击时的默认行为。

（1）检查点
首先，需要检查浏览器是否理解getElementsByTagName和getElementById的方法，此外，还需要检查是否存在id等于imagegalley的元素，如果不存在这个元素，那么函数将无需执行。

if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return