利用DOM的方式点击切换图片及修改文字

本案例主要学习理解，用到的几个DOM方法

01、getAttribute（）方法，获取元素的属性值

02、setAttribute('src',source) 方法，用后边的值修改前边这个元素的属性值

html基本框架代码

<h1>图片点击切换</h1>
    <ul id="imagegallery">
        <li><a href="images/654.jpg" title="图片一说明">图片一</a></li>
        <li><a href="images/contentimg.jpg" title="图片二说明">图片二</a></li>
        <li><a href="images/tuku.jpg" title="图片三说明">图片三</a></li>
    </ul>
    <img src="images/toutiao3.jpg" alt="占位图" id="img">
    <p id="description">图片说明</p>

js相关代码

实现的思路分解：

　　01、用getAttribute()方法获取到a标签的href的属性值

　　02、用document.getElementById()方法获取到图片

　　03、用setAttribute('要修改的元素属性',用href的值修改)

点击修改图片基本思路就是这样。

修改文字的思路，这里为了练习dom的相关方法，没有使用innerHTML方法

　　01、用getAttribute()方法获取到a标签的title的属性值

　　02、获取要修改的id

　　03、获取p元素的第一个文本节点的值 用到firstChild.nodeValu获取

　　04、我们把获取到的title的属性值赋值给03步骤的变量

 function showpic(winpic){
            if(!document.getElementById('img')) return false;
            var source = winpic.getAttribute('href');
            var oImg = document.getElementById('img');
            if(oImg.nodeName !='IMG') return false;
            oImg.setAttribute('src',source);
            if(document.getElementById('description')){
                var description = document.getElementById('description');
                var text = winpic.getAttribute('title');
                description.firstChild.nodeValue = text;
                //description.innerHTML = text;
            }
            return true;
        }

        function prepareGallery(){
            if(!document.getElementsByTagName) return false;
            if(!document.getElementById) return false;
            if(!document.getElementById('imagegallery')) return false;
            var gallery = document.getElementById('imagegallery');
            var links = gallery.getElementsByTagName('a');
            for(var i=0;i<links.length;i++){
                links[i].onclick = function(){
                   //return showpic(this) ? return : false;
                   showpic(this);
                   return false;  
                }
            }
        }

        prepareGallery();