第六章 结构与行为的相互分离程度越大越好

这一章让javascript代码完全移除HTML文档。

编写一个函数把有关操作关联到onclick事件上。这个函数：

-检查当前浏览器是否理解getElementsByTagName()方法；

-检查当前浏览器是否理解getElementById()方法；

-构造一个循环来对链接进行遍历处理

-对onclick事件处理函数进行设置

html文件：

        <h1>chapter4 Snapshots</h1>
        <ul id="imagegallery">
            <li>
                <a href="images/4-1.png"  title="蓝眼萝莉">图片1</a>
            </li>
            <li>
                <a href="images/4-2.png"  title="长发萝莉">图片2</a>   
            </li>
            <li>
                <a href="images/4-3.png"  title="明晓溪动漫图">图片3</a>
            </li>
            <li>
                <a href="images/4-4.png"  title="黑子动漫图">图片4</a>
            </li>
            
        </ul>
        <img src="images/4-1.png" id="placeholder"/>
        <p id="description">蓝眼萝莉</p>    

JS文件：

<script type="text/javascript">

window.onload = ImgGallery;

function showPic(pic){
    
    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.childNodes[0].nodeValue = text;
}

function ImgGallery(){

if(!document.getElementsByTagName){
    return false;
}
if(!document.getElementById){
    return false;
}
if(!document.getElementById("imagegallery")){
    return false;   //判断id="imagegallery"的元素是否存在
}

var image = document.getElementById("imagegallery");
var links = image.getElementsByTagName('a');
//遍历links数组里的各个元素
for(var i=0; i<links.length; i++){
    links[i].onclick = function(){
      showPic(this);
      return false;  
    }
　　}
}
</script>