Javascript DOM 图片库初步学习
之所以写这些内容，是因为眼看这学期就快要结束了，我的javascript这门课程都没有怎么学，所以呢从今天开始陆陆续续的发布些关于javascript DOM的学习笔记，也当是记录吧。
首先呢，在一个网页中我想通过一系列的连接看到不同的图片，我们会碰到这样的情况：当点击一个连接的时候，浏览器会打开一个新的窗口来显示你想要看的图片，但是这种用户体验很不好，关于设置图片的显示，我们可以通过DOM
比如这里我写一个showPic()函数来设置显示的函数：
function showPic(whichPic){
document.getElementById("placeholder").setAttribute("src",whichPic.getAttribute("href"));
}
body中的代码：
<body>
<h1>Mr.Smart</h1>
<ul>
<li><a href="1.jpg" title="ziyi1" onclick="showPic(this);">ziyi1</a></li>
<li><a href="2.jpg" title="ziyi2" onclick="showPic(this);">ziyi2</a></li>
<li><a href="3.jpg" title="ziyi3" onclick="showPic(this);">ziyi3</a></li>
<li><a href="4.jpg" title="ziyi4" onclick="showPic(this);">ziyi4</a></li>
<img id="placeholder" src="1.jpg" alt="My image"/>
</ul>
</body>
但是这样写呢，我们会遇到我在上面写的问题，那么我们该怎么办呢？
恩，我们来一起近距离看看事件处理函数的工作机制：在给某个元素添加一个事件处理函数后，一旦事件发生，相应的Javascript代码代码就会得到执行，被调用的Javascript代码可以返回一个值，这个值呢就会被传递给那个事件处理函数，执行成功的话返回true，这样一来，onClick事件处理函数就认为“这个链接被点击”了，反之就是没有被点击(这好像是废话)，好了有了这样的理论知识，我们在onClick事件中添加return false -> onClick = "showPic(this);return false".恩，运行。结果在自己的预料之中。
ok，现在我想在我点击某一个图片时，添加对这个图片的描述。说到这，首先，我们来认识一下，childNodes属性：在一棵节点树上，childNode属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素的所有子元素的数组，如：我们想得到某个文档的body元素的所有子元素，我们可以这样写：var body_elements = document.getElementsByTagName("body")[0];
现在，变量body_elements已经指向那个文档的body元素，接下来可以用body_elements.childNodes获取body元素的所有子元素了。
接下来我们在body中添加这么一段<p id = "description">Choose an image</p>
那么怎么改变这个描述呢，我们先 var text= whichPic.getAttribute("title");来得到图片中属性title的值。先存着吧。之后再定义一个变量 var description = document.getElementById("description");来得到<p>。说到这就不得不说nodeValue属性了，如果想改变一个文本节点的值，那就使用DOM提供的nodeValue属性，但是呢在这里大家要注意一个细节：在用nodeValue属性获取description对象的值时得到的并不是这个段落的文本，你们可以用这个来检测:alert(description.nodeValue);母庸置疑这个调用返回一个null，why? because:<p>元素本书的nodeValue属性就是一个空值，而你正真要的是其包含的文本的值.So,we can do this :alert(description.childNode[0].nodeValue);结果如我们所预料。
最后我们在谈谈firstChild 和 lastChild这两个属性吧，由于数组元素childNode[0]有个更加直观可读的同义词，只要你想访问数组中的第一个元素，你都可以写成：firstChild.与之对应的就是lastChild了，意思我就不再啰嗦了，大家都懂了。
所以呢，改变对着图片的描述所需要的基础理论就有了，有了理论就Code呗，由于前面有了text和description两个变量，就差最后一步了：description.firstChild.nodeValue = text;恩，结束了。
最终的showPic()：
function showPic(whichPic){
document.getElementById("placeholder").setAttribute("src",whichPic.getAttribute("href"));
var text = whichPic.getAttribute("title");
var description = document.getElementById("description")
description.firstChild.nodeValue = text;
}
到此，第一部分就结束了，下一chapter我们对着第一部分的图片库进行改进一次。时间不早了啊，睡个好梦吧。GoodNight！
由于这学期这方面没有怎么学，有更好的方法，各位少侠，show me the code.Thanks.