Web前端技术 课件 模块四 任务6 发布评论功能实现

发布评论功能实现Web前端技术主讲老师：何成芊延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述随着web2.0走向成熟，页面更加强调用户的互动和内容的自制。而且当前页面中的评论或者留言，可以让网页用户参与度更高，并使得页面内容保持新鲜度，根据数据显示评论越多页面的可读性越高，用户的粘度越好。因此，评论区成为了当前的内容性页面中必不可少的重要组成部分。本任务就是使用JavaScript实现评论区这一种重要的页面组件的。效果如图4-6-1所示。延时符学习目标延时符学习目标综合运用JavaScript知识；掌握创建和删除节点的方法；掌握操作子节点和父节点的方法；知识目标能够根据要求编写JavaScript代码实现页面评论区功能；能够合理使用DOM节点的各项操纵；技能目标延时符培养综合项目开发的能力；培养严谨踏实的学习习惯；培养敢于创新的精神；素养目标知识点导图延时符知识点导图延时符相关知识延时符创建DOM节点插入节点删除节点HTMLDOM创建元素一般分为3个步骤，首先，使用document.createElement()方法创建了节点；第二，使用document.createTextNode("")方法为新的节点加入内容；现在，新的节点只存在于程序中，并没有加入到页面中，所以我们无法在浏览器中感觉到它的存在。因此，我们就有通常会使用第三个方法node.appendChild()将新的节点追加到已有元素。这样的3步骤代码如下所示：创建DOM延时符1.<divid="div1">2.<pid="p1">这是一个段落。</p>3.<pid="p2">这是另一个段落。</p>4.</div>5.<script>6.//第一步创建p元素节点7.varpara=document.createElement("p");8.//第二步创建内容"这是一个新段落。"9.varnode=document.createTextNode("这是一个新段落。");10.//整合第一和第二步，将内容加入到p元素11.para.appendChild(node);12.varelement=document.getElementById("div1");13.//第三步将p节点加入到div内部最后位置14.element.appendChild(para);15.</script>上面代码运行结果如图4-6-5所示：创建DOM（续1）延时符以上的实例我们使用了appendChild()方法，它用于添加新元素到已有节点的尾部。如果我们需要将新元素添加到已有节点的开始位置或者是结尾以外的其它位置，那么可以使用另一个方法insertBefore()，也就是在上面实例的第3步，用insertBefore()替换appendChild()方法，代码如下：插入节点延时符1.<divid="div1">2.<pid="p1">这是一个段落。</p>3.<pid="p2">这是另一个段落。</p>4.</div>5.<script>6.//第一步创建p元素节点7.varpara=document.createElement("p");8.//第二步创建内容"这是一个新段落。"9.varnode=document.createTextNode("这是一个新段落。");10.//整合第一和第二步，将内容加入到p元素11.para.appendChild(node);12.varelement=document.getElementById("div1");13.//定义插入的参考位置child即p1的位置14.varchild=document.getElementById("p1");15.//第三步将p节点加入到div内部p1前的位置16.element.insertBefore(para);17.</script>上面代码运行结果如图4-6-6所示：插入节点（续1）延时符删除一个DOM节点就比插入要容易得多。要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：注意到删除后的节点虽然不在DOM文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。删除节点延时符1.//取得待删除节点:2.varself=document.getElementById('to-be-removed');3.//取得待删除节点的父节点:4.varparent=self.parentElement;5.//删除节点:6.varremoved=parent.removeChild(self);7.removed===self;//true任务实施延时符任务分析技术分析与实现完成代码任务分析延时符实现评论区功能，主要工作有两项，一是创建新的评论信息：需要创建新的消息节点；然后从文本域获取用户输入信息；从而构建新的评论信息，最后将新的评论信息节点加入到所以评论的最上方位置。二是删除不要的评论信息，通过循环的方式将所有的“删除评论”绑定删除节点。所以这项任务的主要任务可以分解为2项子任务如图4-6-3所示：技术分析与实现：步骤1延时符步骤1：新评论创建新节点li。在本案例中使用里作为一条评论信息的容器。创建新评论，首先就要为新评论创建出容器。使用以下代码实现：1.varli=document.createElement("li");技术分析与实现：步骤2延时符步骤2：合成新评论内容。新评论内容来自以下两个方面：1.提取文本域中的内容，首先需要获取文本域对象，然后使用value属性提取输入信息；2.格式相关文件，这部分可以使用字符串预先准备；实现以上功能代码如下：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.//整合评论信息并赋值到新的节点对象8.li.innerHTML=strbefore+txt.value+strafter;技术分析与实现：步骤3延时符步骤3：新评论节点加入到评论区。将新评论节点li加入到评论区ul中，并且按照评论区使用习惯，最新的评论将定位在上方。所以使用insertBefore()方法实现，代码如下所示：1.//将评论添加到ul中，而且在最上方2.ul.insertBefore(li,ul.children[0]);技术分析与实现：步骤4延时符步骤4：获取所有的删除评论链接。在创建新评论时，每个评论都包括了“删除评论”链接（格式相关文件部分），所以需要使用querySelectorAll()方法进行获取，返回结果是对象数组，按照链接出现的次序排列。代码如下所示：1.//获取所有删除评论链接2.varas=document.querySelectorAll("a.del");技术分析与实现：步骤4延时符步骤5：所有链接绑定删除节点功能。通过循环遍历所有的删除节点链接。为每个链接绑定单击事件，事件处理方法使用removeChild()删除节点，由于链接和评论区ul以及所在评论li的关系，参数设置应当表达为当前父节点的父节点的父节点(this.parentNode.parentNode.parentNode)。代码如下所示：1.//循环给每个删除绑定事件