JS實(shí)現(xiàn)簡(jiǎn)易留言板（節(jié)點(diǎn)操作）
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)易留言板的具體代碼，供大家參考，具體內(nèi)容如下
今天的案例主要是對(duì)節(jié)點(diǎn)進(jìn)行操作
創(chuàng)建節(jié)點(diǎn)、添加節(jié)點(diǎn)、刪除節(jié)點(diǎn)以及為節(jié)點(diǎn)添加內(nèi)容的操作。
就是一個(gè)簡(jiǎn)單的留言板功能，可以發(fā)布留言，刪除留言。
主要思路：兩個(gè)鼠標(biāo)點(diǎn)擊事件——點(diǎn)擊發(fā)布按鈕事件和點(diǎn)擊刪除按鈕事件
發(fā)布按鈕事件：首先在文檔中創(chuàng)建li節(jié)點(diǎn)。然后第二步，先把文本域中的內(nèi)容獲取出來(lái)賦給li，這里要注意，文本域是表單元素，獲取表單元素的內(nèi)容是使用表單的特有屬性value，要與普通元素獲取內(nèi)容的innerHTML進(jìn)行區(qū)分；再把刪除鏈接添加到li中，利用字符串拼接的方式。最后把li節(jié)點(diǎn)添加到ul中，添加的方式有兩種，是直接添加到ul列表項(xiàng)的末尾，也可以添加到指定位置。這里我是選中插入到ul列表的最前面。
刪除按鈕事件：點(diǎn)擊刪除按鈕的事件是在把創(chuàng)建的li添加到ul中之后定義的。刪除的操作主要是要弄清除是父節(jié)點(diǎn)元素刪除子節(jié)點(diǎn)元素。在這里點(diǎn)擊刪除鏈接，刪除的是當(dāng)前被點(diǎn)擊的按鈕所在的li。li是刪除連接的父節(jié)點(diǎn)元素。
分析永遠(yuǎn)比敲代碼重要。要先分析，再去敲代碼，實(shí)現(xiàn)需求。
先看效果圖吧
默認(rèn)是沒(méi)有任何內(nèi)容的
在文本域中輸入，點(diǎn)擊發(fā)布，可以發(fā)布留言，如果發(fā)完想刪除，可以點(diǎn)擊里面的刪除按鈕，刪除留言
刪除操作后：
JS代碼：
<script> // 點(diǎn)擊發(fā)布，會(huì)把文本域中的內(nèi)容發(fā)布到ul中 // 點(diǎn)擊刪除，會(huì)刪除留言 // 1.獲取事件源 文本域 按鈕 文本域 var text = document.querySelector(’textarea’); var btn = document.querySelector(’button’); var ul = document.querySelector(’ul’); // 2.注冊(cè)點(diǎn)擊事件 btn.onclick = function () { // 首先會(huì)創(chuàng)建一個(gè)li 并把文本域的內(nèi)容給li 再把li添加到ul中 var li = document.createElement(’li’); if (text.value == ’’) { alert(’您沒(méi)有輸入內(nèi)容’) } else { // 文本域的值 value // 增加一個(gè)刪除留言的按鈕 li.innerHTML = text.value + ’<a href='javascript:;' rel='external nofollow' rel='external nofollow' >刪除</a>’; ul.insertBefore(li, ul.children[0]); // 把最新的發(fā)布放到最前面 // ul.appendChild(li); // 3.注冊(cè)刪除點(diǎn)擊事件 var removeBtn = document.querySelectorAll(’a’); for (var i = 0; i < removeBtn.length; i++) { removeBtn[i].onclick = function () { ul.removeChild(this.parentNode); } } } }</script>
全部代碼：
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>留言板</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } li a { float: right; } </style></head> <body> <textarea name='' id=''></textarea> <button>發(fā)布</button> <ul> </ul> <script> // 點(diǎn)擊發(fā)布，會(huì)把文本域中的內(nèi)容發(fā)布到ul中 // 點(diǎn)擊刪除，會(huì)刪除留言 // 1.獲取事件源 文本域 按鈕 文本域 var text = document.querySelector(’textarea’); var btn = document.querySelector(’button’); var ul = document.querySelector(’ul’); // 2.注冊(cè)點(diǎn)擊事件 btn.onclick = function () { // 首先會(huì)創(chuàng)建一個(gè)li 并把文本域的內(nèi)容給li 再把li添加到ul中 var li = document.createElement(’li’); if (text.value == ’’) { alert(’您沒(méi)有輸入內(nèi)容’) } else { // 文本域的值 value // 增加一個(gè)刪除留言的按鈕 li.innerHTML = text.value + ’<a href='javascript:;' rel='external nofollow' rel='external nofollow' >刪除</a>’; ul.insertBefore(li, ul.children[0]); // 把最新的發(fā)布放到最前面 // ul.appendChild(li); // 3.注冊(cè)刪除點(diǎn)擊事件 var removeBtn = document.querySelectorAll(’a’); for (var i = 0; i < removeBtn.length; i++) { removeBtn[i].onclick = function () { ul.removeChild(this.parentNode); } } } } </script></body> </html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JSP動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)原理詳解2. ASP顯示頁(yè)面執(zhí)行時(shí)間的方法3. SpringBoot+Docker+IDEA實(shí)現(xiàn)一鍵構(gòu)建+推送、運(yùn)行、同鏡像多容器啟動(dòng)4. Java并發(fā)編程之Executor接口的使用5. JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹6. 推薦值得學(xué)習(xí)的12款python-web開(kāi)發(fā)框架7. 淺談java中HashMap鍵的比較方式8. JavaScript實(shí)現(xiàn)動(dòng)態(tài)留言板9. vue父子組件傳值不能實(shí)時(shí)更新的解決方法10. 以PHP代碼為實(shí)例詳解RabbitMQ消息隊(duì)列中間件的6種模式
網(wǎng)公網(wǎng)安備