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

Yi_Zhi_Yu 發布于2019-08-19 18:31 / 1597人閱讀

摘要：灰姑娘灰姑娘灰姑娘不足點擊事件綁定在代碼中，很笨重，下一篇中將做升級。

前言：在《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

電影天堂

選擇一張圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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文檔中...

Bryan 2019-08-19 18:32 評論0 收藏0