《DOM编程艺术》中初步实现的图片库的总结（一）

2016-07-06 08:55:00

前言：在《DOM编程艺术》一书中，作者给出了一个实例：创建一个图片库，其实功能很简单，就是点击某个列表项时，下方出现相应的图片以及图片说明（图片说明事先以title的形式写在HTML中），虽然是一个简单的例子，当时作者在书中循序渐进，不断的改善图片库中间引入各种知识点，真的是一本好书，在此对这个实例进行一些总结。

－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－

1.HTML部分

# 电影天堂    1.             灰姑娘    1.             千与千寻    1.             哆啦A梦    1.             当幸福来敲门选择一张图片

2.CSS样式

    h1{        color: # 333;    }    a{        color: gray;        font-weight: bold;        text-decoration: none;    }    ul{        padding: 0;    }    li{        float: left;        padding: 1em;        list-style-type: none;    }    img{        display: block;        clear: both;    }

3.js代码

    //首先封装一个函数, 参数whicpic代表一个元素的节点，即指向某个图片的a元素    function showPic(whichpic){        //获取某个图片的href属性        var source = whichpic.getAttribute("href");        //获取占位符图片的节点        var placeholder = document.getElementById("placeholder");        //使用setAttribute对placeholder元素的src属性进行刷新        placeholder.setAttribute("src" , source);        //one more thing:在前换图片的时候，将占位符图片下面的文字内容切换为对应图片的title        //首先获取图片对应的title属性        var text = whichpic.getAttribute("title");        //获取图片描述的节点        var description = document.getElementById("description");        //实现文本的切换        //首先要获取到description中的文本，需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它        description.firstChild.nodeValue = text;          //也可以用firstchild：description.firstChild.nodeValue    }

4.总结

1.首先获取图片的href属性：

whichpic.getAttribute("href")

2.接着获取占位符图片的节点： document.getElementById("placeholder")

3.然后设置占位符图片的src属性:

placeholder.setAttribute("src" , source)

4.接着对占位符图片下方的文字进行操作，把图片的title值赋值给标签的nodeValue

var text = whichpic.getAttribute("title")
var description = document.getElementById("description")
description.firstChild.nodeValue = text

其中可以通过childNode获取节点的所有子节点，并且用nodeType属性进行判断：1代表元素节点、2代表属性节点、3代表文本节点，因为本例标签只有一个子节点，所以可以用fistChild，或者childNode[0]来获取，获取节点后再用nodeValue获取节点的属性值。

5.添加onclick处理事件

这只是初级的一个例子，所以函数处理事件嵌套在HTML代码中，并且为了阻止点击链接的默认行为（跳转到一个新的页面），后面还要返回给它一个false。

    1.             灰姑娘

6.不足

点击事件绑定在HTML代码中，很笨重，下一篇中将做升级。

7.老规矩，贴出完整源码

example    h1{        color: # 333;    }    a{        color: gray;        font-weight: bold;        text-decoration: none;    }    ul{        padding: 0;    }    li{        float: left;        padding: 1em;        list-style-type: none;    }    img{        display: block;        clear: both;    }# 电影天堂    1.             灰姑娘    1.             千与千寻    1.             哆啦A梦    1.             当幸福来敲门选择一张图片    //首先封装一个函数, 参数whicpic代表一个元素的节点，即指向某个图片的a元素    function showPic(whichpic){        //获取某个图片的href属性        var source = whichpic.getAttribute("href");        //获取占位符图片的节点        var placeholder = document.getElementById("placeholder");        //使用setAttribute对placeholder元素的src属性进行刷新        placeholder.setAttribute("src" , source);        //one more thing:在前换图片的时候，将占位符图片下面的文字内容切换为对应图片的title        //首先获取图片对应的title属性        var text = whichpic.getAttribute("title");        //获取图片描述的节点        var description = document.getElementById("description");        //实现文本的切换        //首先要获取到description中的文本，需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它        description.firstChild.nodeValue = text;          //也可以用firstchild：description.firstChild.nodeValue    }

关键字：JavaScript, dom

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！