留言板是一种可以用来记录、展示文字信息的载体，有比较强的时效性。网站中的留言板功能非常重要，可以实现和用户互动，例如人民网的“领导留言板”。“领导留言板”是人民日报为中央部委和地方各级党委政府主要负责同志搭建的网上群众工作平台。平台自创办以来，近300万件群众急难愁盼问题获得回复办理，大批建设性意见得到各地区各部门及时吸纳。各级政府单位入驻“领导留言板”，能从线下分发到线上交办全流程参与群众留言办理，进一步降低了跨系统、跨部门的协调成本，提升了留言办理效率。本节介绍使用DOM实现留言板的发表留言和删除留言功能。
1.案例呈现
留言板有发表留言和删除留言两个功能，如图6-27所示。单击“删除”按钮将一条留言删除；单击“发表留言”按钮将用户昵称、发表时间和留言内容显示在网页指定区域。
图6-27 留言板
2.案例分析
单击“删除”按钮将一条留言删除时，需要先找到当前留言区域的父元素，通过父元素调用removeChild()方法删除子元素。单击“发表留言”时，首先通过createElement()方法创建用户昵称、发表时间、留言内容和删除按钮等元素，然后通过父元素调用appendChild()方法将他们显示在网页指定区域。
3.案例实现
1 <div id="outside">2<h3>全部留言</h3>3<div id="comment"> 4</div>5<h4>发表留言</h4>6<div id="addComment">7 昵称：<input type="text" id="name" />8 <br /><br />9 留言内容:<textarea id="comContent"></textarea>10 <button id='tjpl'>发表留言</button>11</div>12 </div>13 <script>14 var comment = document.querySelector('#comment');15 var ips = document.querySelector('input');16 var textarea = document.querySelector('textarea');17 var tjpl = document.getElementById('tjpl')18 tjpl.onclick = function () {19 if (ips.value == '' || textarea.value == '') {20 alert("输入不能为空！");21 return;22 }23 var divs = document.createElement('div');24 divs.className = 'comment1';25 divs.innerHTML = '网友昵称:';26 comment.appendChild(divs);27 var spans = document.createElement('span');28 spans.innerHTML = ips.value;29 divs.appendChild(spans);30 var time = document.createElement('time');31 time.innerHTML = new Date().toLocaleString();32 divs.appendChild(time);33 var ps = document.createElement('p');34 ps.innerHTML = textarea.value;35 divs.appendChild(ps);36 var del = document.createElement('button');37 del.className = 'del';38 del.innerHTML = '删除';39 divs.appendChild(del);40 var dels = document.querySelectorAll('.del');41 for (var i = 0; i < dels.length; i++) {42 dels[i].onclick = function () {43 comment.removeChild(this.parentNode);44 }45 }46ips.value = '' ;47textarea.value = '';48}49 </script>
案例的CSS样式，详见本书案例完整源程序。上述代码中，第3行的“<div id="comment">”标签是页面展示留言的区域；第14-17行代码分别获取了留言展示区域、用户昵称、留言内容和发表留言按钮4个元素；第18行代码为“发表留言”按钮绑定了单击事件及其处理程序；第19-22行代码的功能是当用户昵称或者留言内容为空时弹出提示框；第23-26行代码创建了div元素，设置了它的样式和文本内容，将它作为子元素添加至页面展示留言区域，它代表了一条留言；第27-39行代码分别创建了一条留言所具有的用户昵称、发表时间、留言内容和删除按钮元素；第40-45行代码为所有的删除按钮绑定单击事件及其处理程序，其中this指向当前按钮，this.parentNode指向当前留言。第46-47行代码清空昵称和留言区域。
视频讲解：案例： 留言板_哔哩哔哩_bilibili
源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》
