DOM Scripting代码：相册

DOM Scripting是很好的一本JavaScript教程类书籍，主要针对网页设计人员。点击访问DOM Scripting中文版的豆瓣，本书的完整代码可以在出版社的网站上下载。

书中的相册代码很好地分离了网页的行为与结构，极具学习意义。点击进入相册实际效果页面。下面是该相册的JavaScript代码和注释：

实例JavaScript代码

/*本段代码要从最后两行读起*/
/*相册代码的关键函数，传入参数为a元素*/
function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  /*取得a元素的href*/
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  /*显示图片：让img元素的src变为a元素的href*/
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  /*取得a元素的title*/
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  /*将a元素的title赋给描述文字*/
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}
/*2.给所有的imagegallery的a添加上click事件响应函数*/
function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
	/*向处理函数传入this，也就是a元素*/
      return showPic(this);
	}
    links[i].onkeypress = links[i].onclick;
  }
}
/*添加load事件响应函数的函数*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*1.代码开始*/
function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  /*创造一个img元素，设置它的属性*/
  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","images/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery");
  /*创建一个段落，作为描述*/
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext);
  /*imagegallery是文档里的ul*/
  var gallery = document.getElementById("imagegallery");
  /*将大图和描述文字插入文档*/
  gallery.parentNode.insertBefore(placeholder,gallery);
  gallery.parentNode.insertBefore(description,gallery);
}
/*1.代码开始，addLoadEvent(preparePlaceholder);*/
addLoadEvent(preparePlaceholder);
/*2.*/
addLoadEvent(prepareGallery);

HTML代码

  <h1>Snapshots</h1>
  <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>
  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误