前言

我现在总结一下我之前敲代码犯的错误，清除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. 容器云平台No.8~kubernetes负载均衡之ingress-nginx

    Ingress 是什么? Ingress 公开了从集群外部到集群内服务的 HTTP 和 HTTPS 路由. 流量路由由 Ingress 资源上定义的规则控制. 可以将 Ingress 配置为服务提供外 ...

  2. 利用python简单实现unittest

    python3的eval方法 eval() 函数用来执行一个字符串表达式,并返回表达式的值 # 例如 a = [1,2,3,4] b = "a" print(eval(b)) # ...

  3. jsp(java server pages)：java服务器端的页面

    jsp(java server pages):java服务器端的页面 JSP的执行过程1.浏览器输入一个jsp页面2.tomcat会接受*.jsp请求,将该请求发送到org.apache.jasper ...

  4. Python练习题 008：打印101-200之间的所有素数

    [Python练习题 008]判断101-200之间有多少个素数,并输出所有素数. ---------------------------------------------------------- ...

  5. 063 01 Android 零基础入门 01 Java基础语法 08 Java方法 01 无参无返回值方法

    063 01 Android 零基础入门 01 Java基础语法 08 Java方法 01 无参无返回值方法 本文知识点:无参无返回值方法 无参无返回值方法 案例 为什么使用方法?--方便复杂问题调用 ...

  6. MySQL数据库入侵及防御方法

    来自:http://blog.51cto.com/simeon/1981572 作者介绍 陈小兵,高级工程师,具有丰富的信息系统项目经验及18年以上网络安全经验,现主要从事网络安全及数据库技术研究工作 ...

  7. RTKLIB的主要功能

    RTKLIB是全球导航卫星系统GNSS(global navigation satellite system)的标准&精密定位开源程序包,RTKLIB由日本东京海洋大学(Tokyo Unive ...

  8. 【题解】一本通例题 S-Nim

    \(\color{purple}{Link}\) \(\text{Solution:}\) 这个题就是给\(Nim\)游戏做了一个限制. 考虑一下\(\text{SG}\)函数:给定的局面下对应的\( ...

  9. Vue自定义Popup弹窗组件|vue仿ios、微信弹窗|vue右键弹层

    基于vue.js构建的轻量级Vue移动端弹出框组件Vpopup vpopup 汇聚了有赞Vant.京东NutUI等Vue组件库的Msg消息框.Popup弹层.Dialog对话框.Toast弱提示.Ac ...

  10. iPhone手机越狱-逆向砸壳-代码注入

    iPhone手机越狱 逆向砸壳 代码注入 工具下载 操作越狱 安装待逆向应用(app) 使用OpenSSH连接手机 找到应用二进制文件地址 找到应用document沙盒地址 拷贝砸壳工具(dumpde ...