本书的第4章使用第3章学到的操作DOM的方法和属性写了一个展示图片的网页，并在第5，6章对代码进行了优化。
第一版，搭建网页的静态结构，包括一级标题<h1>，无序列表清单<ul>，每个列表<li>中又包括了链接<a>，当点击列表文字时会显示链接所指向的图片，这属于浏览器的默认行为。代码如下：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charest="utf-8"/> 5 <title>照片库</title> 6</head> 7<body> 8 <h1>My Photoes Gallery</h1> 9 <ul> 10 <li><a href="pictures/ASH1.png" title="空气弹簧">ASH</a></li> 11 <li><a href="pictures/LS1.png" title="片弹簧">LS</a></li> 12 <li><a href="pictures/MN1.png" title="磁负刚度">MN</a></li> 13 <li><a href="pictures/PAN.png" title="倒立摆">PAN</a></li> 14 </ul> 15</body> 16</html>
问题：显示图片后只能通过后退回到列表清单界面，希望实现图片与列表在同一界面，点击列表文字后直接将图片及说明显示在下方。
第二版，点击链接时直接将图片及说明显示在下方
操作步骤分为3步：
1，结构上添加图片占位符和文本占位符
2，js中写一个函数，用链接中的href属性替换图片占位符中的src属性，用链接中的title属性替换文本占位符的值
3，在html中相应节点上添加事件处理函数，应用js中所写的函数，注意需要阻止点击的默认行为
html代码如下：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charest="utf-8"/> 5 <title>照片库</title> 6</head> 7<body> 8 <h1>My Photoes Gallery</h1> 9 <ul> 10 <li><a href="pictures/ASH1.png" title="空气弹簧" onclick="showPics(this);return false;">ASH</a></li> 11 <li><a href="pictures/LS1.png" title="片弹簧" onclick="showPics(this);return false;">LS</a></li> 12 <li><a href="pictures/MN1.png" title="磁负刚度" onclick="showPics(this);return false;">MN</a></li> 13 <li><a href="pictures/PAN.png" title="倒立摆" onclick="showPics(this);return false;">PAN</a></li> 14 </ul> 15 <img id="placeholder" src="" alt="该图片已损坏或无法显示"/> 16 <p id="description">description of picture</p> 17 18 <script src="ShowPics.js"></script> 19</body> 20</html>
js代码如下：
1function showPics(whichPic){ 2 //获取链接节点，获取图片节点，将链接节点中的href属性赋给图片节点中的src属性 3 var source=whichPic.getAttribute("href"); 4 var myimage=document.getElementById("placeholder"); 5 myimage.setAttribute("src",source); 6 //用链接节点中的title属性替换文本节点的值 7 var mytext=document.getElementById("description"); 8 var context=whichPic.getAttribute("title"); 9 mytext.firstChild.nodeValue=context; 10}
注意：
1，在onclick事件中添加 return false;表示默认行为没有被触发即阻止了默认行为。
2，给图片占位符赋值时除了用setAttribute还可以用一种非DOM的方法，直接给元素的属性赋值 myimage.src=source，但这种方法并不适用于所有的属性，一般还是使用setAttribute，适用于所有属性。
3，给文本节点赋值时，需要注意修改的是p节点的第一个子节点，这个节点才是显示在界面上的文字。
4，src和href的区别
src（source）用引入的内容替换当前元素，常用于script，img，frame，
浏览器解析到该元素时会停止渲染知道文件加载完毕，所以将js文件放在body的最后；
href是一种引用，在当前文档与引用资源之间建立起一种联系，常用于a，link，
浏览器解析不会停止，所以用href引用css文件。
问题：
为提高代码的兼容性、可访问性，需要检查js功能被禁用时是否支持平稳退化；js与html是否完全分离；对DOM方法或使用到的元素是否存在进行检测
1，js代码没有与html完全分开，事件处理函数仍在html中
2，缺少必要的测试环节，如html中某些元素不存在
第三版：将事件处理函数从html中独立出来，该函数需要实现的功能：当点击某一链接时，将该链接传递给showPic（）函数，去掉点击的默认行为
html代码只需要将onload函数去掉，在ul标签上加id属性
js代码如下：
1function showPics(whichPic){ 2 //增加测试 3 if(!document.getElementById("placeholder"))return false; 4 //获取链接节点，获取图片节点，将链接节点中的href属性赋给图片节点中的src属性 5 var source=whichPic.getAttribute("href"); 6 var myimage=document.getElementById("placeholder"); 7 myimage.setAttribute("src",source); 8 //用链接节点中的title属性替换文本节点的值，能否用nodeValue?可以，但是是p节点的第一个子节点的属性值 9 if(!document.getElementById("description"))return false; 10 var mytext=document.getElementById("description"); 11 var context=whichPic.getAttribute("title"); 12 mytext.firstChild.nodeValue=context; 13} 14function seperateclick(){ 15 //1,测试当前浏览器是否理解DOM方法 16 if(!document.getElementById)return false; 17 if(!document.getElementsByTagName)return false; 18 var gallery=document.getElementById("picturegallery"); 19 if(!gallery)return false;//疑问？能否先赋值再测试 20 //2,遍历列表中的所有链接，当某一链接被点击时，把这一链接传递给showPics函数，取消默认行为 21 //先将所有的链接存放在一个数组中 22 var links=gallery.getElementsByTagName("a"); 23 //循环遍历 24 for(var i=0;i<links.length;i++){ 25 links[i].onclick=function() { 26 showPics(this); 27 return false; 28 } 29 } 30} 31window.onload=seperateclick;