`
lwangkangrui
  • 浏览: 16368 次
  • 性别: Icon_minigender_2
最近访客 更多访客>>
社区版块
存档分类
最新评论

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);
      }
}

 

 

  • 大小: 83.6 KB
3
0
分享到:
评论
2 楼 lwangkangrui 2013-10-28  
joyworker 写道
HTML4好像也有dom吧?

有的,只是html5中增加了getElementsByClassName这样的方法
1 楼 joyworker 2013-10-28  
HTML4好像也有dom吧?
Global site tag (gtag.js) - Google Analytics