《Javascript DOM 编程艺术》一个练习

《Javascript DOM编程艺术》看到第六章了，美术馆告一段落了,想验证一下自己是不是真的学到了。

就一大早起来凭着自己的理解，边做边改的实现了Javascript Gallery。



测试地址在这：http://dabentu.com/js/xhtml/javascript-dom-exercise01.html

整个JS代码是：

function showPic(whichPic)
{
if(!(document.getElementById("images")))return true;
var source = whichPic.href;                         //新图片地址
var imagePlace = document.getElementById("images"); //图片元素的操控
imagePlace.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("imagelist")) return false;
//如果不支持这些方法就乖乖返回吧
var i;
var links = document.getElementById("imagelist").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的路还很长，加油！

（全文完）

若非注明，均为原创文章，转载请注明： 转载自大笨兔博客
本文出自 “大笨兔博客” 博客，请务必保留此出处http://dabentu.blog.51cto.com/4779949/886296