《Javascript DOM编程艺术》看到第六章了，美术馆告一段落了,想验证一下自己是不是真的学到了。
就一大早起来凭着自己的理解，边做边改的实现了Javascript Gallery。
测试地址在这：http://dabentu.com/js/xhtml/javascript-dom-exercise01.html
整个JS代码是：
function showPic(whichPic)
{
if(!(document.getElementById("p_w_picpaths")))return true;
var source = whichPic.href; //新图片地址
var p_w_picpathPlace = document.getElementById("p_w_picpaths"); //图片元素的操控
p_w_picpathPlace.src = source; //设置从链接中获取的图片地址
var desText;
if(!document.getElementById("description"))return false; //没有找到描述文本的段落
if(whichPic.title)
desText = whichPic.title;
else
desText = "这个链接没有设置title属性"; //获取图片描述文本
var description = document.getElementById("description"); //描述文本放置的地方
if(3 == description.childNodes[0].nodeType)
description.childNodes[0].nodeValue = desText; //desText是否是文本节点
return false;
}
function addLinkEvent() //给<li>中的<a>绑定onclick事件
{
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("p_w_picpathlist")) return false;
//如果不支持这些方法就乖乖返回吧
var i;
var links = document.getElementById("p_w_picpathlist").getElementsByTagName("a");
for(i = 0;i < links.length;i++){
links[i].onclick = function(){//给每个<li>链接绑定 分离了javascript
return showPic(this);
}
}
}
window.onload = addLinkEvent; //当窗口加载完成后执行addLinkEvent函数
里面用的DOM函数有：
getElementById()
getElementsByTagName()
DOM属性：
nodeType
nodeValue
childNodes
其实书上还是用了两个方法setAttribute()和getAtrribute()。前者是设置元素的属性，使用方法setAttribute(name，value)，getAtrribute(name)
这里我没有使用这两个函数，我直接用的whichPic.href。这样它只在web浏览器中有效，而前面那两个函数的话只要在支持DOM的程序中都有效。
其中childnodes我忘写了s，所以脚本一直没有运行成功，后来alert了半天，再对照了书上的，终于发现了问题所在。
学习JS的路还很长，加油！
（全文完）
若非注明，均为原创文章，转载请注明： 转载自大笨兔博客
