javascript dom代码应用：简单的相册

　　最近一直对前端开发很感兴趣，特别是在像jquery这种流行ajax类库的帮助下，即使没有很好的javascript功底也能做出不错的动态效果，确实是方便。但我觉得这还不行，毕竟什么都是人家封装好的，得自己深入学习下原生的javascript才踏实。今天看到一篇不错的博文，介绍了一个基于js dom编程的相册实例，虽然这个例子很小，但个人认为还是很有学习价值的，先给出html和效果图，这样有助于后面js的理解。

 1 <div id="content">
 2     <h1>Snapshots</h1>
 3     <ul id="imagegallery">
 4         <li>
 5             <a href="photo/fireworks.jpg" title="A fireworks display">
 6                 <img src="photo/thumbnail_fireworks.jpg" alt="Fireworks" />
 7             </a>
 8         </li>
 9         <li>
10             <a href="photo/coffee.jpg" title="A cup of black coffee">
11                 <img src="photo/thumbnail_coffee.jpg" alt="Coffee" />
12             </a>
13         </li>
14         <li>
15             <a href="photo/rose.jpg" title="A red, red rose">
16                 <img src="photo/thumbnail_rose.jpg" alt="Rose" />
17             </a>
18         </li>
19         <li>
20             <a href="photo/bigben.jpg" title="The famous clock">
21                 <img src="photo/thumbnail_bigben.jpg" alt="Big Ben" />
22             </a>
23         </li>
24     </ul>
25 </div>

结构还是挺简单的，这里a元素的href属性值为要显示大图的路径，img为对应的小图。效果就是点击下面的小图，上面显示对应的大图。

下面给出js实现：

 1     /*step1:代码开始*/
 2     function preparePlaceholder() {
 3         if(!document.createElement) return false;
 4         if(!document.createTextNode) return false;
 5         
 6         /*创造一个img元素,设置它的属性*/
 7         var placeholder = document.createElement("img");
 8         placeholder.setAttribute("id", "placeholder");
 9         placeholder.setAttribute("src", "photo/placeholder.gif");
10         placeholder.setAttribute("alt", "my image gallery");
11         
12         /*创建一个段落,作为描述*/
13         var description = document.createElement("p");
14         description.setAttribute("id","description");
15         var desctext = document.createTextNode("choose an image");
16         description.appendChild(desctext);
17         
18         /*imagegallery是文档里的ul*/
19         var gallery = document.getElementById("imagegallery");
20         
21         /*将大图和描述文字插入文档*/
22         gallery.parentNode.insertBefore(placeholder, gallery);
23         gallery.parentNode.insertBefore(description, gallery);
24     }
25 
26     /*step2:给所有的imagegallery的a添加上click事件响应函数*/
27     function prepareGallery() {
28         if(!document.getElementsByTagName) return false;
29         if(!document.getElementById) return false;
30         if(!document.getElementById("imagegallery")) return false;
31         var gallery = document.getElementById("imagegallery");
32         var links = gallery.getElementsByTagName("a");
33         for(var i=0; i < links.length; i++) {
34             links[i].onclick = function() {
35                 return showPic(this);
36             }
37             links[i].onkeypress = links[i].onclick;
38         }    
39     }
40 
41     /*step3:相册代码的关键函数，传入参数为a元素*/
42     function showPic(whichpic) {
43         if(!document.getElementById("placeholder")) return true;
44         
45         /*取得a元素的href*/
46         var source = whichpic.getAttribute("href");
47         var placeholder = document.getElementById("placeholder");
48         
49         /*显示图片:让img元素的src变为a元素的href*/
50         placeholder.setAttribute("src",source);
51         if(!document.getElementById("description")) return false;
52         
53         /*取得a元素的title*/
54         if(whichpic.getAttribute("title")) {
55             var text = whichpic.getAttribute("title");
56         } else {
57             var text = "";
58         }
59         
60         /*将a元素的title赋给描述文字*/
61         var description = document.getElementById("description");
62         if(description.firstChild.nodeType == 3) {
63             description.firstChild.nodeValue = text;
64         }
65         
66         return false;
67     }
68 
69     /*添加load事件响应函数的函数*/
70     function addLoadEvent(func) {
71         var oldonload = window.onload;
72         if(typeof window.onload != 'function') {
73             window.onload = func;
74         } else {
75             window.onload = function() {
76                 oldonload();
77                 func();
78             }
79         }
80     }
81 
82     /*为事件初始化*/
83     addLoadEvent(preparePlaceholder);
84     addLoadEvent(prepareGallery);

我们先看preparePlaceholder函数，在这个函数里创建了一个img元素placeholder，并设置了它对应的属性(id, src, alt)，又创建了一个p元素description，p元素中用appendChild方法插入了一个文本节点用于给出照片的描述，初始为“choose an image”，然后通过document.getElementById找到ul，并把生成的img和p插到图片列表之前。说明下insertBefore的用法，查了下Mozilla developer center:

　　　　　　var insertedElement = parentElement.insertBefore(newElement, referenceElement);

　　　　　　insertedElement 其实就是newElement，作为一个返回结果

　　　　　　parentElement 是要插入的父级元素即插入哪个元素中

　　　　　　newElement 当然就是那个要插入的新元素啦

　　　　　　referenceElement 指要在哪个元素之前插入

我们接着看prepareGallery函数，它的作用是为每个a元素赋予一个单击事件，其中return showPic(this)默认返回的是false，是为了阻止点击a元素后的默认行为（直接到新页面显示图片）

下面是最核心的showPic函数，通过取得包裹对应小图片的a元素中的href 和 title属性值（href的值为小图片对应的大图片的路径），来为preparePlaceholder函数中生成的img设置src属性，和p中的描述文本，形成最终的效果。这里面有个nodeType，具体也可在Mozilla developer center中查到。

最后还有一个很有意思的函数就是addLoadEvent，很有意思...有递归的感觉，把事件函数像队列一样加了进去，然后顺次执行。

这个相册就分析到这，这是我第一次发表博文，有什么不对或需要提高的地方，希望博友们多多指点，我会虚心接受的，谢谢。

实例代码下载