JS错误写法[清除DOM]
前言
我现在总结一下我之前敲代码犯的错误，清除DOM元素，我们开始写代码吧!
HTML
<h1 style="font-size: 18px;font-weight: bold;color:rgba(255,128,128,1)">测试</h1>
<div id="JiJi">
</div>
<input type="button" value="创建邮箱" id="CreateEmail" onclick="CreateEmail()" />
<input type="button" value="清除邮箱" id="ClearEmail" onclick="ClearEmail()" />
JS
var Email = [
"@qq.com",
"@163.com",
"@gamil.com",
"@126.com",
"@yahoo.com",
"@sina.com",
"@hotmail.com",
"@foxmail.com",
]
function CreateEmail() {
for(var i = 0;i< Email.length;i++) {
document.querySelectorAll("#JiJi")[0].innerHTML += "<p>"+Email[i]+"</p>"; }
}
function ClearEmail() {
for(var i = 0; i < document.querySelectorAll("#JiJi p").length;i++) {
document.querySelectorAll("#JiJi p")[i].remove(); }
}
CreateEmail()方法是创建数组里的数据
ClearEmail()方法是清除页面上创建的DOM元素
我们打开浏览器运行看一下
点击创建邮箱
成功创建出了一些邮箱
我们试一下清除邮箱
我们发现居然没清除成功，这样就违背了我们想要清空邮箱的意愿
看一下清除的代码
for(var i = 0; i < document.querySelectorAll("#JiJi p").length;i++) {
document.querySelectorAll("#JiJi p")[i].remove();
}
实际上，我们清除是从头开始清除的，这样清除就会导致每清除一行，下一行DOM元素就会就会向上移动，也就是索引-1，就相当于相隔一行才清除一次DOM,这样是没办法一次性清除完成的，我们必须从DOM的最后一个元素开始清除，毕竟我们是从头创建的，就必须从尾部清除才能清空
改下正确写法
for(var i=document.querySelectorAll("#JiJi p").length-1;i >= 0;i--) {
document.querySelectorAll("#JiJi p")[i].remove();
}
/解释for(var i = 创建DOM元素的索引-1;i>=0;i–)
现在再看一下
清除完成了
完整代码
<html>
<head>
<meta charset="utf-8" />
<title>封装JS</title>
</head>
<body>
<h1 style="font-size: 18px;font-weight: bold;color:rgba(255,128,128,1)">测试</h1>
<div id="JiJi">
</div>
<input type="button" value="创建邮箱" id="CreteEmail" onclick="CreteEmail()" />
<input type="button" value="清除邮箱" id="ClearEmail" onclick="ClearEmail()" />
</body>
<script>
var Email = [
"@qq.com",
"@163.com",
"@gamil.com",
"@126.com",
"@yahoo.com",
"@sina.com",
"@hotmail.com",
"@foxmail.com",
]
function CreteEmail() {
for (var i = 0; i < Email.length; i++) {
document.querySelectorAll("#JiJi")[0].innerHTML += "<p>" + Email[i] + "</p>";
}
}
function ClearEmail() {
//正确写法
for (var i = document.querySelectorAll("#JiJi p").length - 1; i >= 0; i--) {
document.querySelectorAll("#JiJi p")[i].remove();
}
//错误写法
// for(var i = 0; i < document.querySelectorAll("#JiJi p").length;i++) {
// document.querySelectorAll("#JiJi p")[i].remove();
// }
}
</script>
</html>
后言
这错误，新手都会犯，将它写出来，帮助更多的新手 本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进
JS错误写法[清除DOM]的更多相关文章
- JS文件写法操作，DOM基本操作
js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 s ...
- HTML5几种常见的错误写法
本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元 ...
- js,JavaScript,a标签onclick传递参数不对，A标签调用js函数写法总结
错误示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 浏 ...
- jquery 给input赋值错误写法
<script type="text/javascript"> var ue = UE.getEditor('container'); function getCont ...
- angular js 自定义js错误处理(Angularjs js error handler)
使用AngularJS的时候,对JS错误如何自定义处理?(比如用Google Analytics记录angularjs使用中出现的js错误) AngularJS自带一个错误处理service:$exc ...
- 捕获JS 错误日志
最近在做项目的过程中,发现很多JS报错没有引起重视,我就想想把JS错误捕获了,然后展示在我们一个平台上 具体实现代码: window.onerror = function(message, url, ...
- JQuery validate 在IE兼容模式下出现 js错误（成员找不到）的修正:
JQuery validate 在IE兼容模式下 下出现 js错误(成员找不到)的修正: // Add novalidate tag if HTML5. //this.attr( "nova ...
- Fundebug上线Node.js错误监控啦
作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...
- 前端监控系统（二）JS错误日志收集篇
前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...
随机推荐
- display值的分类
整体来讲,display的值可以分为6个大类,1个全局类,一共是7大类: 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值,指的是这些值只会直接影响一个元素的外部表现,而不影响元素里面的 ...
- Windows实战（1）：Nginx代理设置及负载均衡配置
简言 以下配置实现功能: 反向代理 通过轮询的方式实现nginx负载均衡 直接看以下配置文件: #user nobody; worker_processes 1; #error_log logs/er ...
- 趣图：普通人讲故事 VS 程序员讲故事
扩展阅读 趣图:我说自己菜 vs 大佬说自己菜 趣图:客户需求VS客户预算 趣图:在外行人眼中的程序员 如何处理前任程序员留下的代码 一个故事讲清楚NIO
- lombok使用（给自己看的，只为不要忘记自己用过的技术）
如何使用? 一.1)eclipse使用方法 1. 从项目首页下载lombok.jar 2. 双击lombok.jar, 将其安装到eclipse中(该项目需要jdk1.6+的环境) 2)idea使用方 ...
- PHP正则表达式核心技术完全详解 第1节
作者:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! CSDN@极客小俊,原创文章, B站技术分享 B站视频 : Bilibili.com 个 ...
- MySQL二进制备份恢复
一.开启二进制日志1.进入配置文件[mysqld]下添加配置 方案一 vim /etc/my.cnf log-bin = /usr/local/mysql/logs/mysql_binmax_binl ...
- Python-joypy和 R-ggridges 峰峦图制作
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm,作者 宁海涛 转载地址 https://www ...
- 设计完美windbg断点
说到现场调试,断点是最重要的.通常,在生产环境中解决一个非常复杂的问题需要在本地.非生产环境中调试我自己的一台测试机器.我通常会调试有问题的进程或代码,以便更好地了解它是如何工作的,以及在我进入时需要 ...
- Java虚拟机系列——检视阅读
Java虚拟机系列--检视阅读 参考 java虚拟机系列 入门掌握JVM所有知识点 2020重新出发,JAVA高级,JVM JVM基础系列 从 0 开始带你成为JVM实战高手 Java虚拟机-垃圾收集 ...
- 算法进阶 （LIS变形） 固定长度截取求最长不下降子序列【动态规划】【树状数组】
先学习下LIS最长上升子序列 看了大佬的文章OTZ:最长上升子序列 (LIS) 详解+例题模板 (全),其中包含普通O(n)算法*和以LIS长度及末尾元素成立数组的普通O(nlogn)算法,当然还 ...