js图片库 案例
事件处理函数：事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码。本例中想要在用户点击某个链接的时候触发一个动作，所以需要使用onclick事件处理函数。
添加事件处理函数的语法：
event="JavaScript statement(s)"
js代码包含在一对引号之间，可以把任意数量的js语句放在这对引号之间，只要把各条语句用分号隔开就可以。
onclick="showPic(this);"//this表示这个对象，本例中即这个<a>元素标签
事件处理函数的工作机制：在给某个元素添加了世间处理函数后，一旦事件发生，相应的js代码就会执行。被调动的js会返回一个值，这个值将会被传递给那个时间处理函数。本例中当链接被点击时，如果执行的js代码返回true，事件处理函数就认为这个链接被点击了，反之如果返回的值是false，onclick事件处理函数就认为这个链接没有被点击。return false;就会将false返回给事件处理函数，所以这个链接的默认行为没有被触发（打开图片查看器。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Images</title>
</head>
<body>
<h1>图片库</h1>
<ul>
<li><a href="images/door.jpg" onclick="showPic(this);return false;" title="red door">Door</a></li>//return false;事件处理函数工作机制
<li><a href="images/heart.jpg" onclick="showPic(this);return false;" title="red heart">Heart</a></li>
<li><a href="images/lake.jpg" onclick="showPic(this);return false;" title="Xuanwu Lake">Lake</a></li>
<li><a href="images/light.jpg" onclick="showPic(this);return false;" title="lights">Light</a></li>
<li><a href="images/river.jpg" onclick="showPic(this);return false;" title="Qinhuai River">River</a></li>
</ul>
<img id="placeholder" src="images/1.jpg" alt="my image gallery">//选用一个无用图片做占位符图片
<script type="text/javascript" >
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</body>
</html>
childNodes属性
在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes
childNodes返回的数组包含所有类型的节点，不仅仅是元素节点。
每个节点都有nodeType属性，这个属性让我们知道正在与哪一种节点打交道。
语法：node.nodeType
nodeType的值是一个数字。
alert(body_element.nodeType)
nodeType属性总共有12中可取值，但是其中仅有3种具有实用价值。
元素节点的nodeType属性值是1；
属性节点的nodeType属性值是2；
文本节点的nodeType属性值是3；
nodeValue属性
如果想要改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值：node.nodeValue；
不仅可以用来检索节点的值，还可以用来设置节点的值。
firstChild和lastChild属性
只要需要访问childNodes数组中的第一个元素，都可以写成firstChild node.firstChild ←==→ node.childNodes[0]
node.lastChild ←==→ node.childNodes[node.childNodes.length-1]
