《DOM編程藝術》中初步實現的圖片庫的總結（一）

時間 2019-11-08

原文原文鏈接

前言：在《DOM編程藝術》一書中，做者給出了一個實例：建立一個圖片庫，其實功能很簡單，就是點擊某個列表項時，下方出現相應的圖片以及圖片說明（圖片說明事先以title的形式寫在HTML中），雖然是一個簡單的例子，當時做者在書中按部就班，不斷的改善圖片庫中間引入各類知識點，真的是一本好書，在此對這個實例進行一些總結。 javascript

－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－html

1.`HTML`部分

<h1>電影天堂</h1>
    <ul>
        <li>
            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
        </li>
        <li>
            <a href="images/02千與千尋.jpg" title="千與千尋" onclick="showPic(this);return false;">千與千尋</a>
        </li>
        <li>
            <a href="images/03哆啦A夢.jpg" title="哆啦A夢" onclick="showPic(this);return false;">哆啦A夢</a>
        </li>
        <li>
            <a href="images/04當幸福來敲門.jpg" title="當幸福來敲門" onclick="showPic(this);return false;">當幸福來敲門</a>
        </li>
    </ul>
    <!--佔位符圖片-->
    <img id="placeholder" src="images/placeholder.jpg" alt="hehehe">
    <!--一段描述-->
    <p id="description">選擇一張圖片</p>

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`值賦值給`<p>`標籤的`nodeValue`

var text = whichpic.getAttribute("title")java
var description = document.getElementById("description")node
description.firstChild.nodeValue = text編程

其中能夠經過childNode獲取節點的全部子節點，而且用nodeType屬性進行判斷：1表明元素節點、2表明屬性節點、3表明文本節點，由於本例<p>標籤只有一個子節點，因此能夠用fistChild，或者childNode[0]來獲取，獲取節點後再用nodeValue獲取節點的屬性值。函數

5.添加`onclick`處理事件

這只是初級的一個例子，因此函數處理事件嵌套在HTML代碼中，而且爲了阻止點擊連接的默認行爲（跳轉到一個新的頁面），後面還要返回給它一個false。this

<li>
            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
        </li>

6.不足

點擊事件綁定在HTML代碼中，很笨重，下一篇中將作升級。code

7.老規矩，貼出完整源碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>example</title>
    <style>
        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;
        }
    </style>
</head>

<body>
    <h1>電影天堂</h1>
    <ul>
        <li>
            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>
        </li>
        <li>
            <a href="images/02千與千尋.jpg" title="千與千尋" onclick="showPic(this);return false;">千與千尋</a>
        </li>
        <li>
            <a href="images/03哆啦A夢.jpg" title="哆啦A夢" onclick="showPic(this);return false;">哆啦A夢</a>
        </li>
        <li>
            <a href="images/04當幸福來敲門.jpg" title="當幸福來敲門" onclick="showPic(this);return false;">當幸福來敲門</a>
        </li>
    </ul>
    <!--佔位符圖片-->
    <img id="placeholder" src="images/placeholder.jpg" alt="hehehe">
    <!--一段描述-->
    <p id="description">選擇一張圖片</p>

    <!--如下是js代碼-->
    <script>
        //首先封裝一個函數, 參數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
        }
    </script>
</body>

</html>