但我觉得这还不够。毕竟一切都是别人打包的，所以你要深入学习原生javascript才能实用。今天看到一篇不错的博文，介绍了一个基于js dom编程的相册示例。这个例子虽然很小，但我个人认为很有学习价值。首先，我将给出html和渲染，这将有助于以后对js的理解。

复制代码代码如下：正文div id='内容' h1快照/h1 ul id='图像库'阿利href=' photo/Fireworks。jpg ' title=' A Fireworks display ' img src=' http : photo/thumbnail _ Fireworks。jpg ' alt=' Fireworks '/A/Li阿利href='photo/coffee.jpg' title='一杯黑咖啡img src=' http : photo/thumbnail _ Coffee。jpg ' alt=' Coffee '/A/Li阿利超链接结构还是挺简单的，这里a元素的超链接属性值为要显示大图的路径，img为对应的小图。效果就是点击下面的小图，上面显示对应的大图。下面给出射流研究…实现：复制代码代码如下：脚本类型='text/javascript' /*3相册代码的关键函数，传入参数为a元素*/函数显示pic(什么pic){ if(！document.getElementById('占位符)返回true/*取得a元素的href */var source=whipic。GetAttribute(' href ')；定义变量占位符=document.getElementById('占位符');/*显示图片：让图片元素的科学研究委员会变为a元素的href */占位符。SetAttribute(' src '，来源)；if(！文件。getelementbyid('描述')返回false/*取得a元素的标题*/if(whpic。GetAttribute(' title '){ var text=whpic。GetAttribute(' title ')；} else { var text=} /*将a元素的标题赋给描述文字*/var description=文档。getelementbyid(' description ')；if(描述。第一个孩子。nodetype==3){ description。第一个孩子。节点值=文本；}返回false} /*2给所有的图像库的a添加上点击事件响应函数*/function prepareGallery() { if(！document.getElementsByTagName)返回falseif(！document.getElementById)返回falseif(！文件。getelementbyid(' imagegallery ')返回falsevar图库=文档。getelementbyid(' imagegallery ')；var links=图库。getelementsbytagname(' a ')；for(var I=0；我链接。长度；I){ link[I].onclick=function(){ return show pic(this)；}链接[i].按下onkey=link[I].onclick} } /*添加负荷事件响应函数的函数*/function addLoadEvent(func){ var oldonload=window。onloadwindow.onload！=' function '){ window。onload=func} else { window。onload=function(){ oldonload()；func()；} } } /* 1.代码开始*/function prepare placeholder(){ if(！document.createElement)返回falseif(！document.createTextNode)返回false/*创造一个图片元素，设置它的属性*/var占位符=文档。创建元素(' img ')；placeholder.setAttribute('id '，' placeholder ')；placeholder.setAttribute('src '，' photo/placeholder。gif ')；placeholder.setAttribute('alt '，'我的图像库');/*创建一个段落，作为描述*/var description=文档。创建元素(' p ')；description.setAttribute('id '，' description ')；var desc文本=文档。createtextnode('选择一个图像');描述。附录(desc文本)；/*imagegallery是文档里的ul */var gallery=文档。getelementbyid(' imagegallery ')；/*将大图和描述文字插入文档*/图库。父节点。在(占位符，画廊)；画廊。父节点。在(描述，画廊)；} /*为事件初始化*/AddLoadEvent(PreparePlaceholder)；addLoadEvent(prepareGallery)；/script我们先看preparePlaceholder函数，在这个函数里创建了一个图片元素占位符，并设置了它对应的属性(id、src、alt)，又创建了一个p元素描述，p元素中用附录子方法插入了一个文本节点用于给出照片的描述，初始为"选择图像",然后通过document.getElementById找到ul，并把生成的图片和p插到图片列表之前。

解释insertBefore的用法，并检查Mozilla开发者中心： var insert element=parent enement。insertbefore (newelement，reference element)；InsertedElement实际上是一个新元素。作为返回结果，parentElement是要插入的父元素，也就是要插入哪个元素。当然，新元素是要插入的新元素。referenceElement指的是要在哪个元素之前插入。让我们看看prepareGallery函数。其功能是给每个A元素一个点击事件，其中return showPic(this)默认返回false，以防止点击A元素后的默认行为(直接到新页面显示图片)。下面是核心的showPic函数。获取小图片对应的宗地a元素中href和title的属性值(href的值为小图片对应的大图片的路径)，从而为preparePlaceholder函数中生成的img和p中的描述文本设置src属性，形成最终效果。里面有一个nodeType，也可以在Mozilla开发者中心找到。最后一个有趣的函数是addLoadEvent，非常有趣.带着递归的感觉，事件函数像队列一样被添加，然后按顺序执行。哦，这张相册的分析到此结束。这是我的第一篇博文。如果有什么不对的地方或者需要改进的地方，希望博主们多多指教。我会谦卑地接受。谢谢你。代码包下载。