JS错误写法[清除DOM]
前言
我现在总结一下我之前敲代码犯的错误，清除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>
后言
这错误，新手都会犯，将它写出来，帮助更多的新手 本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进
