js学习之dom编程应用图片库

        最近在看《JavaScript Dom编程艺术》这本书，入门经典书，首先推荐之~

        进入正题，首先。何为DOM?

        D——document，O——object，M——Model or Map.(具体阐述可参考上书第三章）。

        DOM编程就是把整个表示为一棵树，所以我们一般使用的方法有：

        document.getElementById（返回一个对象）

        document.getElementsByTagName（返回一个对象数组）

        document.getElementsByClassName(返回一个对象数组，html5中的dom才添加，所以使用的时候最好是加一个函数判断一下浏览器是否能够支持，再做出反应）

       element.getAttribute获得属性

       element.setAttribute("属性名"，属性值)设置属性，但是不会改变文档静态内容，加载之后会刷新。

       element.childNodes子节点

       element.nodeType元素节点为1，属性节点为2，文本节点为3

       element.nodeValue可以用于获取，也可以直接设置（element.nodeValue=text;)

       element.firstChild(lastChild)第一个孩子节点和最后一个孩子节点

       OK，了解完这些之后，就像开始买好了食材了一样，可以小试一把了~

       首先，写好html文档，把整个网页内容和架构搭好

       然后，加入css调整一下，最后就是js文档啦。

function showPic(pic){	//获得placeholder，然后将被点击的图片的链接给placeholdervar source=pic.getAttribute("href");var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);//同样的方法将图片下方的文字改变。因为文字只是其中的文本节点，不是属性，所以不能完全用相同方法。var text=pic.getAttribute("title");var description=document.getElementById("description");description.firstChild.nodeValue=text;
}

这是最后的效果，点击上面的小图，下面会对应显示，文字也会随之变化。

       当然如果你考虑地更多，可能用户会不用禁止了js或者是浏览器有什么问题。这就是平稳退化的问题。为了安全起见，不老是报错，我们最好还是进行对象检测。改进之后的js代码是这样的

// JavaScript Document
window.οnlοad=prepare;
function prepare(){if(!document.getElementsByTagName)return false;if(!document.getElementById)return false;if(!document.getElementById("imagegallery"))return false;var gallery=document.getElementById("imagegallery");var myLink=gallery.getElementsByTagName("a");for(var i=0;i<myLink.length;i++){myLink[i].οnclick=function(){return showPic(this)?false:true;}}
}
function showPic(pic){	if(!document.getElementById("placeholder"))return false;var source=pic.getAttribute("href");var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);if(document.getElementById("description")){var text=pic.getAttribute("title");var description=document.getElementById("description");description.firstChild.nodeValue=text;}return true;}

       附件是做这个的所有文件~~

       补充一些以上文件没有用到的常见的动态改变标签的方法：

       createElement创建对象

       createTextNode创建文本节点

       appendChild添加子节点，让创建节点加入文本的树里

       insertBefore将节点添加到某个节点之后

       需要注意的是没有insertAfter的方法，可以自己写一个

funciton(newElement,targetElement){//先获取父节点var parent=targetElement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement)}else{parent.insertBefore(newElement,targetElement.nextSibling);}
}