zoukankan      html  css  js  c++  java
  • 【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);
  • 相关阅读:
    java web spring challenge01
    eclipse的一个小失误
    创建线程的方式三:实现Callable接口。 --- JDK 5.0新增
    线程通信的应用:经典例题:生产者/消费者问题
    8.5 练习
    8.4 练习1
    LockTest.java
    DeadLock.java
    线程死锁
    使用同步机制将单例模式中的懒汉式改写为线程安全的
  • 原文地址:https://www.cnblogs.com/positive/p/3666347.html
Copyright © 2011-2022 走看看