JS实现简易留言板(节点操作)


Posted in Javascript onMarch 16, 2020

本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下

今天的案例主要是对节点进行操作

创建节点、添加节点、删除节点以及为节点添加内容的操作。 

就是一个简单的留言板功能,可以发布留言,删除留言。

主要思路:两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件

发布按钮事件:首先在文档中创建li节点。然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取内容的innerHTML进行区分;再把删除链接添加到li中,利用字符串拼接的方式。最后把li节点添加到ul中,添加的方式有两种,是直接添加到ul列表项的末尾,也可以添加到指定位置。这里我是选中插入到ul列表的最前面。

删除按钮事件:点击删除按钮的事件是在把创建的li添加到ul中之后定义的。删除的操作主要是要弄清除是父节点元素删除子节点元素。在这里点击删除链接,删除的是当前被点击的按钮所在的li。li是删除连接的父节点元素。

分析永远比敲代码重要。要先分析,再去敲代码,实现需求。

先看效果图吧

默认是没有任何内容的

JS实现简易留言板(节点操作)

在文本域中输入,点击发布,可以发布留言,如果发完想删除,可以点击里面的删除按钮,删除留言

JS实现简易留言板(节点操作)

JS实现简易留言板(节点操作)

删除操作后: 

JS实现简易留言板(节点操作)

JS代码:

<script>
  // 点击发布,会把文本域中的内容发布到ul中
  // 点击删除,会删除留言
  // 1.获取事件源 文本域 按钮 文本域
  var text = document.querySelector('textarea');
  var btn = document.querySelector('button');
  var ul = document.querySelector('ul');
  // 2.注册点击事件
  btn.onclick = function () {
   // 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
   var li = document.createElement('li');
   if (text.value == '') {
    alert('您没有输入内容')
   } else {
    // 文本域的值 value
    // 增加一个删除留言的按钮
    li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';
    ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
    // ul.appendChild(li);
 
    // 3.注册删除点击事件
    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>发布</button>
 <ul>
 
 </ul>
 <script>
  // 点击发布,会把文本域中的内容发布到ul中
  // 点击删除,会删除留言
  // 1.获取事件源 文本域 按钮 文本域
  var text = document.querySelector('textarea');
  var btn = document.querySelector('button');
  var ul = document.querySelector('ul');
  // 2.注册点击事件
  btn.onclick = function () {
   // 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
   var li = document.createElement('li');
   if (text.value == '') {
    alert('您没有输入内容')
   } else {
    // 文本域的值 value
    // 增加一个删除留言的按钮
    li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';
    ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
    // ul.appendChild(li);
 
    // 3.注册删除点击事件
    var removeBtn = document.querySelectorAll('a');
    for (var i = 0; i < removeBtn.length; i++) {
     removeBtn[i].onclick = function () {
      ul.removeChild(this.parentNode);
     }
    }
   }
  }
 </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
JavaScript实现旋转木马轮播图
Mar 16 #Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 #Javascript
JavaScript实现拖拽效果
Mar 16 #Javascript
js实现点赞效果
Mar 16 #Javascript
Javascript Web Worker使用过程解析
Mar 16 #Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
node跨域请求方法小结
2017/08/25 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python dict的常用方法示例代码
2020/06/23 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
初中美术教学反思
2014/01/29 职场文书
社区禁毒工作方案
2014/06/02 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
小学六一主持词开场白
2015/05/28 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python