【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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。