点击链接更换图片和相应文本 childNotes nodeType nodeValue
用JavaScript和DOM创建图片库
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>图片点击显示</h1>
<ul>
<li>
<a href="images/app.png" title="first photo">first photo</a>
</li>
<li>
<a href="images/app-1.png" title="second photo">second photo</a>
</li>
<li>
<a href="images/az2.jpg" title="third photo">third photo</a>
</li>
<li>
<a href="images/az3.png" title="four photo">four photo</a>
</li>
</ul>
</body>
</html>
下面我想改进几个地方
1.当点击某个链接时，我希望保留在这个网页而不是跳转到另一个网页。
2.当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单,图片下面的文本更换为链接的title属性值。
2.步骤：
1.通过增加一个占位符图片，在这个页面上为图片预留一个浏览区域。
2.在点击某个链接时，拦截这个网页的默认行为，onclick="showPic（this）"，如果仅仅把事件处理函数放到图片列表的一个链接中，我们会遇到一个问题，点击这个链接时，不仅showPic函数被调用，链接被点击的默认行为也会被调用，这意味着用户还是会被带到图片调用窗口，而这是我不希望发生的，我需要阻止这个默认行为被调用。
了解事件处理函数的工作机制，在给某个函数添加事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行，被调用的JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数，例如，我们给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript返回布尔值，当这个链接被点击时，如果那段JavaScript代码返回的是true,onclick事件处理函数，就认为这个链接被点击了，反正，如果是false，onclick事件处理函数就认为这个链接没有被点击。
例如：
<a href="www.baidu.com" onclick="return false">WWW.baidu.com</a>
3.把每个链接的title属性取出来并让它相应的图片一同显示在网页上。
在一棵节点树上，吃了点childNodes属性可以用来获取任何一个元素的所有子元素。 element.childNodes;
由childNotes属性返回的数组包含所有类型的节点，而不仅仅是元素节点，文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点，而他们也全部包含在childNodes属性所返回的数组中。
每个节点都有nodeType属性，nodeType的值是数字，nodeType共有12种可取值， 但其中仅有3种具有实用价值。
元素节点的nodeType属性值是1;
属性节点的nodeType属性值是2;
文本节点的nodeType属性值是3;
4.nodeValue属性，如果想改变一个文本节点的值，那就实用DOM提供的nodeValue属性，它是用来得到或设置一个节点的值，node.nodeValue;
<p id="description">选择一张图片</p>
<span style="font-family: Arial, Helvetica, sans-serif;">alert(description.nodeValue);</span>有个细节，再用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。而是null,因为<p>本身的nodeValue属性是一个空值，而你真正需要的是<p>元素所包含文本的值，包含在<p>元素里的文本是另一种节点，它是<p>元素的第一个子节点，因此我们想要的是<p>的第一个子节点的nodeValue属性值。
<span style="font-family: Arial, Helvetica, sans-serif;">alert(description.childNodes[0].nodeValue);</span>node.childNodes[0]同义词node.firstchild;
还有node.lastchild等同于node.childNodes[node.childNodes.length-1];
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>图片点击显示</h1>
<ul id="ulList">
<li>
<a href="images/app.png" title="first photo" >first photo</a>
</li>
<li>
<a href="images/app-1.png" title="second photo" >second photo</a>
</li>
<li>
<a href="images/az2.jpg" title="third photo" >third photo</a>
</li>
<li>
<a href="images/az3.png" title="four photo" >four photo</a>
</li>
</ul>
<img id="placeholder" src="images/app.png" alt="我的图片库"> <!--通过增加一个占位符图片，在这个页面上为图片预留一个浏览区域。-->
<p id="description">选择一张图片</p>
<script type="text/javascript">
window.onload=function(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("ulList")) return false;
var ulList=document.getElementById("ulList");
var links=ulList.getElementsByTagName("a");
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false; //图片切换不成功返回false
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
if(placeholder.nodeName!='IMG') return false;
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
var description=document.getElementById("description");
if(whichpic.getAttribute("title")){
var text=whichpic.getAttribute("title");
}
else{
text="";
}
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
}
return true; //图片切换成功返回true
}
if(links.length>0){
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
showPic(this);
return !showPic(this);
}
links[i].onkeypress=links[i].onclick; //使用键盘
}
}
}
</script>
</body>
</html>