我的前端入门第一本书是《JavaScript Dom 编程艺术》，网上查找资料发现前端的入门推荐书籍最受好评的就是这本和《JavaScript 高级程序设计》了。之所以先选这本是因为这本书从实例开始带领读者一步步学习，写作风格也如其名字一样具有艺术感，阅读起来很舒服。本书第一二三稍微有计算机基础的人阅读起来都不困难，也没有什么好记录的，从第四章开始，本书开始介绍案例图片库~每一节都是干货满满滴~
第四章——案例研究：JavaScript图片库：
4.1 标记
无序清单元素<ul>，有序清单元素<ol>。无序清单元素列出图片库的链接，点击某个链接即可跳转到相应的图片，但图片重新返回到链接清单还需要借助流浪器的Back按钮。
<ul>
<li>
<a href="image/1.jpg" title="1" >1 </a>
</li>
<li>
<a href="image/2.jpg" title="2" >2 </a>
</li>
<li>
<a href="image/3.jpg" title="3" >3 </a>
</li>
</ul>
希望改进：
1. 当点击某个链接时，留在这个页面而不是转到另一个窗口。
2. 当点击这个链接时，希望同时看到那张图片以及原有的图片清单。
做法：
1. 增加“占位符”图片在主页上为浏览器预留一个浏览区域；
<img id="placeholder" src="data:image/1.jpg" alt="my image gallery"/> //将这行代码插到图片清单的末尾
2. 点击这个链接时，拦截这个浏览器的默认行为
3. 点击某个链接时，将“占位符”图片替换为相对应的图片
//做法2.3 用下一节介绍JavaScript函数实现
4.2 JavaScript
要实现上面的做法2.3，可以通过 showPic 函数修改占位符图片的src属性。
function showPic(whichpic){//whichPic 代表一个元素节点，指向某个图片的<a>元素。
var source=whichpic.getAttribute("href"); //获取图片的文件路径
var placehold=document.getElementById("placeholder"); //获取“占位符”图片
placehold.setAttribute("src",source);// 刷新占位符的src属性
}
setAttribute 是第一级DOM的组成部分，可以设置任意元素节点的任意属性。也可以用placehold.src=source来代替。
placehold.src=source;// 刷新占位符的src属性
4.3 应用这个JavaScript 函数
将上面的JavaScript程序保存在example.js文件中。
在图片库的HTML文件的</body>中插入：
<script type="text/javascri pt" src="example.js"></script>
然后在图片列表的链接添加行为，也就是事件处理函数（在特定事件发生时调用特定的JavaScript代码，例：onmouseover，onmouseout，onclick，onkeypress）。
<a href="image/1.jpg" onclick="showPic(this);return false" title="1" >1 </a> // return false表示取消链接被点击时的默认行为
4.4 对这个函数做扩展
childNodes属性：获得任意元素的所有子元素。
childNodes.length：获取子元素的个数。
nodeType：获取节点的属性。共有12中可取值，仅三种具有实用价值。元素节点的nodeType值，1；属性节点，2；文本节点，3。
nodeValue：获取节点的值。
// 在“占位符”图片下面添加图片描述
<img id="placeholder" src="data:image/1.jpg" alt="my image gallery"/>
<p id="describe"> choose an image</p>
将“占位符”图片下面添加图片描述修改为点击图片的描述：
//在JS中修改“choose an image”的方式是：
var des=document.getElementById("describe");
des.childNodes[0].nodeValue=whichpic.getAttribute("title");
firstChild 和 lastChild：元素的第一个子元素和最后一个元素。
des.childNodes[0].nodeValue=whichpic.getAttribute("title");
//可以修改为：
des.firstChild.nodeValue=whichpic.getAttribute("title");
到目前为止完整的JS代码清单：
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placehold=document.getElementById("placeholder");
placehold.setAttribute("src",source);
var des=document.getElementById("describe");
des.firstChild.nodeValue=whichpic.getAttribute("title");
}
4.5 小结
DOM的几个新属性：
childNodes：获得任意元素的所有子元素。
nodeType：获取节点的属性。共有12中可取值，仅三种具有实用价值。元素节点的nodeType值，1；属性节点，2；文本节点，3。
nodeValue：获取节点的值。
firstChild 和 lastChild：元素的第一个子元素和最后一个元素。
重点：
利用DOM提供的方法编写图片库脚本和用事件处理函数把JavaScript代码与网页集成到一起。