首先先建立一个html文件，建立一个图片库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>学习日记</title></head><body><h1>hello picture</h1><ul> <li> <a href="images/guitar.jpg" title="one guitar">guitar</a> </li> <li> <a href="images/back.jpg" title="boy'back">back</a> </li> <li> <a href="images/hair.jpg" title="girl'hair">hair</a> </li> <li> <a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a> </li></ul><img id="placeholder" src='/images/loading.gif' data-original="images/placeholder.gif" /></body></html>
然后写一个函数，用来更换图片，查看图片时，浏览器默认的默认查看行为是在一个新的窗口打开这张图片，而我们的目的是在一个页面实现对图片的更换，所以我们要取消这种默认行为。
代码更改如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>学习日记</title></head><body><h1>hello picture</h1><ul> <li> <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a> </li> <li> <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a> </li> <li> <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a> </li> <li> <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a> </li></ul><img id="placeholder" src='/images/loading.gif' data-original="images/placeholder.gif" /><script>function showpic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source);}</script></body></html>这样即实现了查看图片在同一个页面。
界限来介绍几种常用的属性
1.nodeValue属性：它用来得到或者设置一个节点的值
2.childNodes属性：用来获取一个元素的所有子元素
3.nodeType属性：
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
4.firstChild属性：相当于childNodes[0]
5.lastChild属性：相当于childNodes[chlidNodes.length-1]
接下来我们运用以上属性来获取图片的描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>学习日记</title><style type="text/css">body{ font-family:"Helvetica","Arial",serif; color:#333; background-color:#ccc; margin:1em 10%;}h1{ color:#333; background-color:transparent;}a{ color:#c60; background-color:transparent; font-weight:bold; text-decoration:none;}ul{ padding:0;}li{ float:left; padding:1em; list-style:none;}img{ display:block; clear:both;}</style></head><body><h1>hello picture</h1><ul> <li> <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a> </li> <li> <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a> </li> <li> <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a> </li> <li> <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a> </li></ul><img id="placeholder" src='/images/loading.gif' data-original="images/placeholder.gif" /><p id="discription">选择一张图片</p><script>function showpic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); var text=whichpic.getAttribute("title"); var discription=document.getElementById("discription"); discription.firstChild.nodeValue=text;}</script></body></html>为其添加样式，并获取到了图片的详细信息。图片的详细信息就是li元素的title属性，p元素的
firstChild值为“选择一张图片”，是一个文本节点。
原标题：javascript dom 编程艺术笔记 第四章：图片库
关键词：JavaScript
我知道了 