前言

我现在总结一下我之前敲代码犯的错误，清除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. WebGL之延迟着色

    什么是延迟着色(Deferred Shading)?它是相对于正常使用的正向着色(Forward Shading)而言的,正向着色的工作模式:遍历光源,获取光照条件,接着遍历物体,获取物体的几何数据, ...

  2. Infor EAM：注重行业属性，实现对轨道交通线性资产的可视化管理

    Infor EAM:注重行业属性,实现对轨道交通线性资产的可视化管理 企业得利,一要开源,二要节流.而企业资产管理的目的,也正是从资产的角度出发,一方面通过相关资源与活动的合理安排提高设备可利用率.增 ...

  3. robotframework获取Token

    公司做接口自动化,但是其他接口调用都需要传入token,所以首要目标是把token读取出来. 需要清楚以下内容: 1.登录使用post请求 2.https协议,且登录后需手工验证SSL证书,默认处于不 ...

  4. spring javabean以及反射机制

    spring是一个管理java对象的一个容器,注入到容器中的对象称之为javabean: spring配置的bean,配置的不是bean而是实例. 反射机制:一个类中的方法,属性等都可以获取本类然后获 ...

  5. Centos-切换用户身份-su

    su 切换用户身份 相关选项 - 加载相应用户下环境变量 -c   使用某个身份执行一个指令 -m  改变用户身份不改变环境变量 切换为超级用户 su - 普通用户切换为超级用户需要输入密码,超级用户 ...

  6. 【数量技术宅|量化投资策略系列分享】股指期货IF分钟波动率统计策略

    更多精彩内容,欢迎关注公众号:数量技术宅.想要获取完整策略代码,请加技术宅微信:sljsz01 股指期货分钟级别波动率观察 在A股市场,股指期货是由一揽子股票组成的股票现货指数,所对应的期货.由于期货 ...

  7. 认证授权：IdentityServer4 - 数据持久化

    前言: 前面的文章中IdentityServer4 配置内容都存储到内存中,本篇文章开始把配置信息存储到数据库中:本篇文章继续基于github的代码来实现配置数据持久化到MySQL中 一.基于EFCo ...

  8. JDK1.8新特性之（一）--Lambda表达式

    近期由于新冠疫情的原因,不能出去游玩,只能在家呆着.于是闲来无事,开始阅读JDK1.8的源代码.在开始之前也查询了以下JDK1.8的新特性,有针对性的开始了这段旅程. 只看不操作,也是不能心领神会的. ...

  9. 《C++primerplus》第10章练习题

    1.定义一个类表示银行账户.数据成员包括姓名,账号和存款.成员函数可以执行初始化数据.显示数据和取款存款的功能. //Bank.cpp #include<iostream> #includ ...

  10. 【题解】CF1375D Replace by MEX

    \(\color{purple}{Link}\) \(\text{Solution:}\) 观察到题目要求操作次数不超过\(2n,\)且不必最小化操作次数,所以一定是构造题. 考虑将序列转化为\([0 ...