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，然后将被点击的图片的链接给placeholder
	var 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.onload=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].onclick=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);
      }
}

 

 

评论

2 楼 lwangkangrui 2013-10-28  

joyworker 写道

HTML4好像也有dom吧？

有的，只是html5中增加了getElementsByClassName这样的方法

1 楼 joyworker 2013-10-28  

HTML4好像也有dom吧？