前言

我现在总结一下我之前敲代码犯的错误，清除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. [Node]创建静态资源服务器

    项目初始化 .gitignore cnpm i eslint -D eslint --init得到.eslintrc.js .eslintrc.js module.exports = { 'env': ...

  2. Vue 登录/登出以及JWT认证

    1. 后端代码概览 server/router/index.js 请求 router.get('/getUserInfo', function (req, res, next) { // 登录请求 r ...

  3. SpringBoot框架：快速入门搭建运行一个应用程序（一）

    一.环境配置 Java环境:1.8版本 开发工具:IntelliJ IDEA 二.简单应用 1.创建项目 选择创建的项目类型为Spring Initializr,Project SDK选择1.8版本的 ...

  4. 我把公司 10 年老系统改造 Maven，真香！！

    公司有几个老古董项目,应该是 10 年前开发的了,有一个是 JSP + Servlet,有一个还用的 SSH 框架,打包用的 Ant,是有多老啊,我想在座的各位很多都没听过吧. 为了持续集成.持续部署 ...

  5. Java8 新特性lambda表达式（一）初始

    本篇参考Richard Warburton的 java8 Lambdas :Functional Programming for the Masses 学习lambda表达式之前,需要知道什么是函数式 ...

  6. 【CF1425B】 Blue and Red of Our Faculty! 题解

    原题链接 简要翻译: 有一个连通图,A和B同时从点1出发,沿不同的路径前进.原本,图上的每一条边都是灰色的.A将经过的边涂成红色,B将经过的边涂成蓝色的.每个回合每个人只能走灰色的边.当某个回合中不存 ...

  7. Python-变量、变量作用域、垃圾回收机制原理-global nonlocal

    变量实现原理决定了Python使用的垃圾回收机制为变量引用计数,当这个对象引用计数为0时候,则会自动执行__del__函数回收资源, del方法只是把变量指向的对象引用计数减一而已并删除这个变量 表达 ...

  8. 【Linux】一些文件限制配置

    linux资源限制配置文件是/etc/security/limits.conf:限制用户进程的数量对于linux系统的稳定性非常重要. limits.conf文件限制着用户可以使用的最大文件数,最大线 ...

  9. 引用类型之Object

    引用类型 引用类的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起. 对象是某个特定引用类型的实例.新对象是使用new操作符后跟一个构造函数 ...

  10. 01 学习人工智能，不做笔记？做笔记不知道如何输入数学公式？“onenote+Mathematics Add-In”拯救你！onenote安装数学输入公式插件Microsoft Mathematics Add-In for Word and OneNote教程走一波

    一.Microsoft Mathematics Add-In 插件下载 Microsoft Mathematics Add-In for Word and OneNote插件下载链接: https:/ ...