【DOM编程艺术】图片库再次改进

        图片库中一个图片和一段文字仅仅是为showpic脚本服务的。若能把结构和行为彻底分开那最好不过了。既然这些元素的存在只是为了让DOM方法处理它们，那么用DOM

方法来创建它们才是最合适的选择。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查看图片</title>
<style type="text/css">
ul,li{ list-style:none;}
ul li{ line-height:24px; float:left; padding:1em;}
img{ display:block; clear:both;}
</style>
</head>

<body>
<h1>Snapshots</h1>
<ul id='imagegallery'>
    <li><a href="images/1.jpg"  title="pic01111">第一张图片</a></li>
    <li><a href="images/2.jpg"  title="pic02222">第二张图片</a></li>
    <li><a href="images/3.jpg" title="pic03333">第三张图片</a></li>
    <li><a href="images/4.jpg" title="pic04444">第四张图片</a></li>
</ul>
<script>
window.onload=prepareGallery;
function prepareGallery(){
    if(!document.getElementById ) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById('imagegallery')) return false;
    var gallery=document.getElementById('imagegallery');
    var links=gallery.getElementsByTagName('a');
    //再次改进的地方
    var placeholder=document.createElement('img');
    placeholder.setAttribute('id','placeholder');
    placeholder.setAttribute('alt','My Image Gallery');
    placeholder.setAttribute('src','images/placeholder.gif');
    var description=document.createElement('p');
    description.setAttribute('id','description');
    var desctxt=document.createTextNode('Choose an image');
    description.appendChild(desctxt);
    document.getElementsByTagName('body')[0].appendChild(placeholder);      //document.body.appendChild(placeholder);
    document.getElementsByTagName('body')[0].appendChild(description);      //document.body.appendChild(description);

    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
           return showpic(this) ? false : true; 
        }
　　　　// links[i].onkeypress=links[i].onclick;
    }
}

function showpic(whichpic){
    if( !document.getElementById('placeholder')) return false;
    var placeholder=document.getElementById('placeholder');
    if(placeholder.nodeName!='IMG') return false;   //*******nodeName属性总是返回一个大写字母的值，即使元素在HTML文档里是小写字母。
    placeholder.setAttribute('src',whichpic.getAttribute('href'));
    if(document.getElementById('description')){
        var text=whichpic.getAttribute('title')?whichpic.getAttribute('title'):' '; //三元操作符
        var description=document.getElementById('description');
        if(description.firstChild.nodeType==3){
          description.firstChild.nodeValue=text;
        }
    }
    return true;
}

</script>
</body>
</html>

 将placeholder和description插入到ul id='imagegallery'之前,如下：

parentElement.insertBefore(newElement,targetElement);

父亲元素                             新元素         目标元素

    gallery.parentNode.insertBefore(placeholder,gallery);
    gallery.parentNode.insertBefore(description,gallery);

 

posted @ 2014-04-15 15:17  Western Journey  阅读(153)  评论(0)  编辑  收藏  举报