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

Yi_Zhi_Yu 发布于2019-08-19 18:31 / 1599人阅读

摘要：灰姑娘灰姑娘灰姑娘不足点击事件绑定在代码中，很笨重，下一篇中将做升级。

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

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

1.HTML部分

电影天堂

选择一张图片

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。

        
            灰姑娘

6.不足

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

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

example

电影天堂

选择一张图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79658.html

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

摘要：前言在编程艺术中初步实现的图片库的总结一中，有很多不足之处比如事件处理嵌套在中，显得如此笨重和屌丝没有对函数进行相应的安全检查等，本篇文章对上述问题做了全面的升级。前言：在《DOM编程艺术》中初步实现的图片库的总结（一）中，有很多不足之处：比如事件处理嵌套在HTML中，显得如此笨重和屌丝；没有对showPic函数进行相应的安全检查等，本篇文章对上述问题做了全面的升级。－－－－－－－－...

阿罗 2019-08-19 18:32 评论0 收藏0
DOM事件总结（一）

摘要：三级事件处理程序级事件定义了两个方法，分别用于处理指定和删除事件处理程序的操作和，他们都接收三个参数要处理的事件名作为事件处理程序的函数一个布尔值。布尔值如果是表示在捕获阶段调用事件处理程序，如果是表示在冒泡阶段调用事件处理程序。前言：撸完CSS－DOM紧接着来撸DOM事件，事件总结完成后我要开始总结动画，然后用纯JS实现一个轮播图，前路漫漫，还有各种框架等着我～～～本篇主要内容有：...

hedge_hog 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

王岩威 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

liukai90 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（一）

摘要：前言前面是纯总结，后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性，属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个属性里。前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素节点的style属性 HTML文档中...

sourcenode 2019-08-29 10:54 评论0 收藏0