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

╰+哭是因爲堅強的太久メ 2022-01-06 06:19 264阅读 0赞

**图片库中一个图片和一段文字仅仅是为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].οnkeypress=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);

转载于:https://www.cnblogs.com/positive/p/3666347.html