《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的路还很长，加油！

（全文完）

若非注明，均为原创文章，转载请注明： 转载自大笨兔博客