前言

我现在总结一下我之前敲代码犯的错误，清除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. html+css入门基础案例之圣诞那些事

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 5.Scalal语法03 - 函数

  3. 5.Topic与Partition

  4. 2020华为杯数学建模B题-RON建模 赛后总结与分析

    好久好久没有写博客了...挺累的,从二月份开始找暑期实习,接着在进行暑期实习,然后马不停蹄地进行秋招,现在总算结束实习,前两天又参加了华为杯数学建模竞赛,感觉接下来就会很轻松了,希望能好好休息休息.这 ...

  5. Java 内存模型（Java Memory Model，JMM）

    基本概念 JMM 本身是一种抽象的概念并不是真实存在,它描述的是一组规范,通过这组规范定义了程序的访问方式 JMM 同步规定 线程解锁前,必须把共享变量的值刷新回主内存 线程加锁前,必须读取主内存的最 ...

  6. 科普-- 白话HTTPS

    HTTPS是传输协议吗? HTTPS与HTTP有什么关系? HTTPS为什么会安全? 闲扯一下 Mac笔记本.Windows台式机.Linux主机.像这三种类型,它们硬件不同,系统不同,服务端处理的编 ...

  7. javaweb修改表单参数---使用过滤器

    需求: 所有的字段要将空字符串转成null: 问题: 我们知道表单如果不写值的时候,传递到后台的不是null,而且是空字符串.那么怎么改成null呢? 解决: 使用过滤器,将请求的参数修改过后继续,再 ...

  8. 破壳漏洞（CVE-2014-6271）分析

    受影响版本:GNU Bash 4.3及之前版本 影响范围:主流的Linux和MacOSX操作系统,与bash交互的各种应用程序,如HTTP,FTP,DHCP等等. 漏洞原理及POC验证: 1.bash ...

  9. Redis 4.0.2安装与卸载

    安装 使用root用户安装: 1.wget http://download.redis.io/releases/redis-4.0.2.tar.gz 2.tar -zxvf redis-4.0.2.t ...

  10. Ansys Student 2020R2中Fluent编译UDF简介

    使用内建编译器 在Ansys Fluent中编译UDF一般都需要额外安装相应版本的Visual Studio编译器,VS的缺点是体量大,占空间,安装后还需要额外进行相关设置才能正常使用.而新版本的An ...