Web前端技術 課件 模塊四 任務6 發(fā)布評論功能實現(xiàn)

發(fā)布評論功能實現(xiàn)Web前端技術主講老師：何成芊延時符CONTENTS目錄01任務描述03知識點導圖02學習目標

04相關知識05任務實施延時符任務描述延時符任務描述隨著web2.0走向成熟，頁面更加強調(diào)用戶的互動和內(nèi)容的自制。而且當前頁面中的評論或者留言，可以讓網(wǎng)頁用戶參與度更高，并使得頁面內(nèi)容保持新鮮度，根據(jù)數(shù)據(jù)顯示評論越多頁面的可讀性越高，用戶的粘度越好。因此，評論區(qū)成為了當前的內(nèi)容性頁面中必不可少的重要組成部分。本任務就是使用JavaScript實現(xiàn)評論區(qū)這一種重要的頁面組件的。效果如圖4-6-1所示。延時符學習目標延時符學習目標綜合運用JavaScript知識；掌握創(chuàng)建和刪除節(jié)點的方法；掌握操作子節(jié)點和父節(jié)點的方法；知識目標能夠根據(jù)要求編寫JavaScript代碼實現(xiàn)頁面評論區(qū)功能；能夠合理使用DOM節(jié)點的各項操縱；技能目標延時符培養(yǎng)綜合項目開發(fā)的能力；培養(yǎng)嚴謹踏實的學習習慣；培養(yǎng)敢于創(chuàng)新的精神；素養(yǎng)目標知識點導圖延時符知識點導圖延時符相關知識延時符創(chuàng)建DOM節(jié)點插入節(jié)點刪除節(jié)點HTMLDOM創(chuàng)建元素一般分為3個步驟，首先，使用document.createElement()方法創(chuàng)建了節(jié)點；第二，使用document.createTextNode("")方法為新的節(jié)點加入內(nèi)容；現(xiàn)在，新的節(jié)點只存在于程序中，并沒有加入到頁面中，所以我們無法在瀏覽器中感覺到它的存在。因此，我們就有通常會使用第三個方法node.appendChild()將新的節(jié)點追加到已有元素。這樣的3步驟代碼如下所示：創(chuàng)建DOM延時符1.<divid="div1">2.<pid="p1">這是一個段落。</p>3.<pid="p2">這是另一個段落。</p>4.</div>5.<script>6.//第一步創(chuàng)建p元素節(jié)點7.varpara=document.createElement("p");8.//第二步創(chuàng)建內(nèi)容"這是一個新段落。"9.varnode=document.createTextNode("這是一個新段落。");10.//整合第一和第二步，將內(nèi)容加入到p元素11.para.appendChild(node);12.varelement=document.getElementById("div1");13.//第三步將p節(jié)點加入到div內(nèi)部最后位置14.element.appendChild(para);15.</script>上面代碼運行結果如圖4-6-5所示：創(chuàng)建DOM（續(xù)1）延時符以上的實例我們使用了appendChild()方法，它用于添加新元素到已有節(jié)點的尾部。如果我們需要將新元素添加到已有節(jié)點的開始位置或者是結尾以外的其它位置，那么可以使用另一個方法insertBefore()，也就是在上面實例的第3步，用insertBefore()替換appendChild()方法，代碼如下：插入節(jié)點延時符1.<divid="div1">2.<pid="p1">這是一個段落。</p>3.<pid="p2">這是另一個段落。</p>4.</div>5.<script>6.//第一步創(chuàng)建p元素節(jié)點7.varpara=document.createElement("p");8.//第二步創(chuàng)建內(nèi)容"這是一個新段落。"9.varnode=document.createTextNode("這是一個新段落。");10.//整合第一和第二步，將內(nèi)容加入到p元素11.para.appendChild(node);12.varelement=document.getElementById("div1");13.//定義插入的參考位置child即p1的位置14.varchild=document.getElementById("p1");15.//第三步將p節(jié)點加入到div內(nèi)部p1前的位置16.element.insertBefore(para);17.</script>上面代碼運行結果如圖4-6-6所示：插入節(jié)點（續(xù)1）延時符刪除一個DOM節(jié)點就比插入要容易得多。要刪除一個節(jié)點，首先要獲得該節(jié)點本身以及它的父節(jié)點，然后，調(diào)用父節(jié)點的removeChild把自己刪掉：注意到刪除后的節(jié)點雖然不在DOM文檔樹中了，但其實它還在內(nèi)存中，可以隨時再次被添加到別的位置。刪除節(jié)點延時符1.//取得待刪除節(jié)點:2.varself=document.getElementById('to-be-removed');3.//取得待刪除節(jié)點的父節(jié)點:4.varparent=self.parentElement;5.//刪除節(jié)點:6.varremoved=parent.removeChild(self);7.removed===self;//true任務實施延時符任務分析技術分析與實現(xiàn)完成代碼任務分析延時符實現(xiàn)評論區(qū)功能，主要工作有兩項，一是創(chuàng)建新的評論信息：需要創(chuàng)建新的消息節(jié)點；然后從文本域獲取用戶輸入信息；從而構建新的評論信息，最后將新的評論信息節(jié)點加入到所以評論的最上方位置。二是刪除不要的評論信息，通過循環(huán)的方式將所有的“刪除評論”綁定刪除節(jié)點。所以這項任務的主要任務可以分解為2項子任務如圖4-6-3所示：技術分析與實現(xiàn)：步驟1延時符步驟1：新評論創(chuàng)建新節(jié)點li。在本案例中使用里作為一條評論信息的容器。創(chuàng)建新評論，首先就要為新評論創(chuàng)建出容器。使用以下代碼實現(xiàn)：1.varli=document.createElement("li");技術分析與實現(xiàn)：步驟2延時符步驟2：合成新評論內(nèi)容。新評論內(nèi)容來自以下兩個方面：1.提取文本域中的內(nèi)容，首先需要獲取文本域對象，然后使用value屬性提取輸入信息；2.格式相關文件，這部分可以使用字符串預先準備；實現(xiàn)以上功能代碼如下：1.//獲取文本域對象txt2.vartxt=document.querySelector("textarea");3.varli=document.createElement("li");4.//格式預制字符串5.varstrbefore='<divclass="head"><imgsrc="img/default_avatar.jpg"alt=""></div><divclass="cr"><ahref="#"class="user">用戶名</a>:';6.varstrafter='<divclass="lbottom"><spanclass="today">today</span><ahref="#"class="del">刪除評論</a></div></div>';7.//整合評論信息并賦值到新的節(jié)點對象8.li.innerHTML=strbefore+txt.value+strafter;技術分析與實現(xiàn)：步驟3延時符步驟3：新評論節(jié)點加入到評論區(qū)。將新評論節(jié)點li加入到評論區(qū)ul中，并且按照評論區(qū)使用習慣，最新的評論將定位在上方。所以使用insertBefore()方法實現(xiàn)，代碼如下所示：1.//將評論添加到ul中，而且在最上方2.ul.insertBefore(li,ul.children[0]);技術分析與實現(xiàn)：步驟4延時符步驟4：獲取所有的刪除評論鏈接。在創(chuàng)建新評論時，每個評論都包括了“刪除評論”鏈接（格式相關文件部分），所以需要使用querySelectorAll()方法進行獲取，返回結果是對象數(shù)組，按照鏈接出現(xiàn)的次序排列。代碼如下所示：1.//獲取所有刪除評論鏈接2.varas=document.querySelectorAll("a.del");技術分析與實現(xiàn)：步驟4延時符步驟5：所有鏈接綁定刪除節(jié)點功能。通過循環(huán)遍歷所有的刪除節(jié)點鏈接。為每個鏈接綁定單擊事件，事件處理方法使用removeChild()刪除節(jié)點，由于鏈接和評論區(qū)ul以及所在評論li的關系，參數(shù)設置應當表達為當前父節(jié)點的父節(jié)點的父節(jié)點(this.parentNode.parentNode.parentNode)。代碼如下所示：1.//循環(huán)給每個刪除綁定事件