JS错误写法[清除DOM]
2024-08-29 07:11:53
前言
我现在总结一下我之前敲代码犯的错误,清除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>
后言
这错误,新手都会犯,将它写出来,帮助更多的新手 本文结束了,如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方,给我提意见,让我加以改进
最新文章
- 云计算下PAAS的解析一
- 【位运算经典应用】 N皇后问题
- clock sense和analysis mode
- com组件 Ieframe的主页锁定
- cxgrid对经过筛选过的数据的选择(反选)
- MAC OS安装wget
- 命令行界面下用户和组管理之groupmod和groupdel的使用
- 用Myeclipse 编写struts.xml时,自动提示
- VCRedist.exe静默安装方法(转)
- 【插队问题-线段树-思维巧妙】【poj2828】Buy Tickets
- MSSQL2005 修改数据库的排序规则
- 【原创】leetCodeOj --- Fraction to Recurring Decimal 解题报告
- Brainfuck与Ook!编程语言解析与解密
- linux oracle 10g 安装时 .bash_profile的设置
- kafka和strom集群的环境安装
- Go语言入门——dep入门
- SQLServer创建用户登录
- koa2 中使用 svg-captcha 生成验证码
- 全局解释器锁 GIL
- 【原创】angularjs1.3.0源码解析之执行流程
热门文章
- shiro 退出过滤器 logout ---退出清除HTTPSession数据
- JavaScript创建对象的方式汇总
- nginx安装步骤
- 配置hive的元数据到Mysql中
- 基于springboot工程浅谈整合rabbitmq怎么样防止消息发送mq不丢失和消费mq的消息防止丢失
- 我的Keras使用总结(5)——Keras指定显卡且限制显存用量,常见函数的用法及其习题练习
- C/的常用位运算符
- 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
- 044 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 06 使用do-while循环实现猜字游戏
- <;stdbool.h>;的使用