前言

我现在总结一下我之前敲代码犯的错误,清除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]的更多相关文章

  1. JS文件写法操作,DOM基本操作

     js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 s ...

  2. HTML5几种常见的错误写法

    本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元 ...

  3. js,JavaScript,a标签onclick传递参数不对,A标签调用js函数写法总结

    错误示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 浏 ...

  4. jquery 给input赋值错误写法

    <script type="text/javascript"> var ue = UE.getEditor('container'); function getCont ...

  5. angular js 自定义js错误处理(Angularjs js error handler)

    使用AngularJS的时候,对JS错误如何自定义处理?(比如用Google Analytics记录angularjs使用中出现的js错误) AngularJS自带一个错误处理service:$exc ...

  6. 捕获JS 错误日志

    最近在做项目的过程中,发现很多JS报错没有引起重视,我就想想把JS错误捕获了,然后展示在我们一个平台上 具体实现代码: window.onerror = function(message, url,  ...

  7. JQuery validate 在IE兼容模式下出现 js错误(成员找不到)的修正:

    JQuery validate 在IE兼容模式下 下出现 js错误(成员找不到)的修正: // Add novalidate tag if HTML5. //this.attr( "nova ...

  8. Fundebug上线Node.js错误监控啦

    作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...

  9. 前端监控系统(二)JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

随机推荐

  1. RabbitMQ消息积压的几种解决思路

    在日常工作中使用RabbitMQ偶尔会遇不可预料的情况导致的消息积压,一般出现消息积压基本上分为几种情况: 消费者消费消息的速度赶不上生产速度,这总问题主要是业务逻辑没设计好消费者和生产者之间的平衡, ...

  2. Mysql查看最大连接,修改

    1.查看最大连接量 show variables like '%max_connections%'; 2.修改最大连接量 //修改完记得重启 set GLOBAL max_connections = ...

  3. 关于Java的编译执行与解释执行

    编程语言分为低级语言和高级语言,机器语言.汇编语言是低级语言,C.C++.java.python等是高级语言. 机器语言是最底层的语言,能够直接执行.而我们编写的源代码是人类语言, 计算机只能识别某些 ...

  4. 分布式系统监视zabbix-安装

    zabbix概述 Zabbix是什么 Zabbix 是由Alexei Vladishev创建,目前由Zabbix SIA在持续开发和支持. Zabbix 是一个企业级的分布式开源监控方案. Zabbi ...

  5. Vue搭建组件库并发布到 npm

    https://www.jianshu.com/p/72d303449abc

  6. 新手接触springboot

    新手使用springboot或者说,刚接触java行业,有些不明白的就是项目的架构是怎么样的,我今天在这儿稍微整理了一下 有些新手可能在想,springboot是怎么解决最原始的增-删-改-查, 快速 ...

  7. 容器云平台No.5~企业级私有镜像仓库Harbor V2.02

    镜像仓库 仓库,顾名思义,就是存放东西的地方,Docker仓库,理所当然,就是存放docker镜像的地方了. Docker仓库分公有仓库和私有仓库.共有仓库有hub.docker.com.gcr.io ...

  8. 盘点MySQL中比较实用的函数

    之前小编在工作中遇到一些处理数据的问题,例如完成日期格式化,获取几天后的时间,生成指定格式的编码等问题,这时候小编经常会写一大堆逻辑代码来进行处理,还自己感觉自己很流弊的样子,后来却发现同事遇到相同的 ...

  9. echarts中折线图切换为数据视图(表格布局)表头无法对齐解决方法

                dataView: {               show: true,               readOnly: true,               option ...

  10. shiro安全框架和spring整合

    上干货......... 整合spring的配置文件 <?xml version="1.0" encoding="UTF-8"?><beans ...