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

时间 2019-11-19

原文原文链接

　　本文介绍了使用DOM的简单方法实现动态加载图片的功能。javascript

　　前文介绍了：css

　　1 DOM四个经常使用的方法html

　　首先看一下效果，初始时是一个相册，能够点击导航，切换图片，并切换下方显示内容：java

　　点击house，能够动态的切换另外一个图片node

　　所使用的代码，以下：编程

<!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 如何动态设置元素对象的属性值ui

　　3 如何拦截click事件this

　　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