【web必知必会】—— 使用DOM完成属性填充

  本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了: 1 DOM四个常用的方法

  首先看一下效果,初始时是一个相册,可以点击导航,切换图片,并切换下方显示内容:

  点击house,可以动态的切换另一个图片

  所使用的代码,如下:

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>我的相册</title>

         <style type="text/css">
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #333;
                background-color: #ccc;
                margin: 1em 10%;
            }
            h1 {
                color:#333;
                background-color: transparent;
            }
            a {
                color:#c60;
                background-color: transparent;
                font-weight: bold;
                text-decoration:none;
            }
            li {
                float: left;
                padding: 1em;
                list-style: none;
            }
            img {
                clear:both;
                display: block;
            }
         </style>
    </head>
    <body>
        <h1>我的相册</h1>
        <ul>
            <li>
                <a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
            </li>
            <li>
                <a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
            </li>
            <li>
                <a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
            </li>
            <li>
                <a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
            </li>
        </ul>

        <img id="placeHolder" alt="image" src="images/pig.png"/>

        <p id="description">Choose an image.</p>

        <script type="text/javascript">
            function showPic(whichPic){
                var source = whichPic.getAttribute("href");
                var placeHolder = document.getElementById("placeHolder");
                placeHolder.setAttribute("src",source);

                var text = whichPic.getAttribute("title");
                var description = document.getElementById("description");
                description.firstChild.nodeValue = text;
            }
        </script>
    </body>
</html>

  代码解析

  在这篇示例代码中,主要需要了解的内容是:

  1 如何获取元素对象的属性

  2 如何动态设置元素对象的属性值

  3 如何拦截click事件

  4 如何动态设置元素文本

  5 float浮动

  1&2 获取设置元素对象的属性

  前篇已经介绍过了,获取设置元素的属性,可以使用getAttribute()和setAttribute()两个方法:

  在showPic()函数中,通过传过来的对象,可以直接调用getAttribute获取属性href的链接内容,然后通过getElementById方法获取图片对象,并设置其src的属性值。

var source = whichPic.getAttribute("href");
var placeHolder = document.getElementById("placeHolder");
placeHolder.setAttribute("src",source);

  3 onclick事件

  上面已经创建好了showPic()方法,只要传入对象即可。因此在a标签中,使用onclick事件,即可。

  但是onClick事件,是要接收一个bool值,如果是true,则会默认的跳到另一个网页链接;相反,如果是false,则不会产生任何结果。

  因此在onClick事件中需要如下书写:

<a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>

  4 动态设置文本

  如果想要使用元素对象的文本,使用nodeValue就可以了。但是如果直接使用,会得到null值。

  因为,元素对象本身是没有文本的,但是它有childNodes对象、firstChild和lastChild对象。

  展开他的childNodes属性可以发现,该属性中包含一个对象:

  该对象中有nodeValue属性,对应的才是标签对应的内容。

  由于该标签中只有一个对象,因此使用 firstChild 和 lastChild 或者 childNodes[0] 都可以获取到该对象。

  其中的原理,类似前面文章讲述的元素节点,属性节点和文本节点的关系,文本节点是该元素标签节点的一个子对象,因此无法用nodeValue直接获取标签的文本,而是需要获取它的孩子对象,才能得到nodeValue。

  5 float浮动

  如果不设置img的CSS样式,会发现本来我们想要使ul中的li标签水平显示,结果在宽度足够的情况下,img也跟着水平显示了。

  这是为什么呢?

  查阅资料发现,原来传统的文档对象是按照文档布局来显示的:由上到下,由左到右,遇到块级元素则换行,遇到内联元素则补齐。

  如果使用float浮动,会打破该布局,如果给对象设置上了float属性,则会导致文档布局时,出现一定的空隙,那么这个空隙就会让下一个元素来填充了。

  因此上面的图片布局中,img元素会随着ul中li的float一起浮动显示。

  而clear:both则是为了预防float引起的布局错乱,可以使用clear清除布局设置。这样img就不会与前面的li产生同样的float效果了。

  但是虽然清除了浮动,但由于img元素属于内联元素,因此只要把它转换成块级元素,就可以产生换行的效果了。

            img {
                clear:both;
                display: block;
            }

  参考

  【1】float详解:http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

  【2】《JavaScript DOM 编程艺术》

  【3】巧用clear:both:http://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html

  【4】display:http://www.w3school.com.cn/cssref/pr_class_display.asp

  【5】块级元素与内联元素:http://www.cnblogs.com/NetSos/archive/2010/08/31/1814223.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏枕边书

代码迁移之旅(二)- 渐进式迁移方案

说在前面 这是代码迁移的第二篇文章,也是最后一篇了,由于个人原因,原来的迁移我无法继续参与了,但完整的方案我已经准备好了,在测试环境也已经可以正常进行了。 上篇...

28990
来自专栏IT可乐

Maven详解(三)------ Maven工程目录介绍

  上一章我们配置并安装好了 Maven,那么这一章我们介绍如何用eclipse创建一个 Maven 工程,然后介绍 Maven 工程的目录结构。 1、ecli...

31050
来自专栏IT可乐

Maven详解(五)------ 坐标的概念以及依赖管理

  我们知道maven能帮我们管理jar包,那么它是怎么管理的呢?这篇博客我们来详细介绍。 1、什么是坐标? ①、数学中的坐标     在平面上,使用 X 、...

307100
来自专栏枕边书

空间索引 - 各数据库空间索引使用报告

空间索引 索引我们都用过,它是一种特殊的存储结构,就像图书馆里书的分类存放策略或是现代化图书馆里的图书查询系统,能帮助我们快速找到自己需要的书。 数据库中,索引...

1.4K80
来自专栏IT可乐

Servlet 详解

1、什么是 Servlet? Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请...

26170
来自专栏枕边书

我的支付总结(二) 系统设计

业务流程 上文提到由于支付处理的流程复杂性,为了避免因为冗长的流程阻塞降低了处理效率,支付系统中多使用异步机制,将整个支付业务流程拆分为多步处理。支付系统将流程...

438100
来自专栏MelonTeam专栏

一种用于短文本的神经响应机

导语 这篇文章是翻译别人的,来源是https://arxiv.org/abs/1503.02364 摘要 我们提出了神经响应机(NRM),一种基于...

20880
来自专栏MelonTeam专栏

React Native学习笔记

原理 一.React 以我对前端非常简陋的理解,它需要三个模块实现基本的完整功能: 1.         HTML,创建DOM节点和DOM树,组成页面的结构和...

31690
来自专栏C#

将DataTable转换成CSV文件

    DataTable用于在.net项目中,用于缓存数据,DataTable表示内存中数据的一个表。CSV文件最早用在简单的数据库里,由于其格式简单,...

23360
来自专栏IT可乐

Linux系列教程(十八)——Linux文件系统管理之文件系统常用命令

  通过前面两篇博客,我们介绍了Linux系统的权限管理。Linux权限管理之ACL权限 介绍了通过设定 ACL 权限,我们为某个用户指定某个文件的特定权限,这...

234100

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励