- 学习目的:实现在dom上的增删操作;
-
案例:模拟回帖/微博评论功能案例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>评论回复</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 800px;
border: 1px solid #cccccc;
margin: 100px auto;
padding: 30px;
}
#my_textarea {
width: 80%;
height: 150px;
}
.box-top {
margin-bottom: 30px;
}
#reply {
margin: 0 80px;
}
#reply li {
border-bottom: 1px dashed #cccccc;
color: red;
line-height: 44px;
}
#reply li a {
float: right;
}
</style>
</head>
<body>
<div id="box">
<div class="box-top">
<label>发表评论:</label>
<textarea id="my_textarea"></textarea>
<button id="comment">发表</button>
</div>
<ul id="reply">
</ul>
</div>
<script>
window.onload = function () {
//封装id获取操作
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
//发表按钮点击
$("comment").onclick = function () {
//获取输入的内容
var content = $("my_textarea").value;
//判断为空
if (content.length === 0) {
alert("请输入评论的内容!");
return;
} else {
var li = document.createElement("li");
li.innerHTML = content + '<a href = "Javascript:;">删除</a>';//动态处理a标签
$("reply").appendChild(li);//在ul中添加li
//清除输入框
$("my_textarea").value = "";
}
//删除操作
//获取li中所有链接a元素
var liList = $("reply").getElementsByTagName("a");
//遍历拿到每个"删除"标签
for (var i = 0; i < liList.length; i++) {
var a = liList[i];
a.onclick = function () {
//删除父元素li
this.parentNode.remove();
}
}
}
}
</script>
</body>
</html>
可以注意到此时删除操作是在发表操作的区域块中的
在案例过程中,我一开始把
删除评论操作和发表评论操作并列的放在一起,因为我觉得这是两个独立的地位相等的操作.但是执行起来,删除操作并没有效果,原因是在
发表操作区域中添加的li元素在删除区域中获取不到,评论的次数决定了删除的个数,决定了遍历数组的长度,如果在删除操作之前就结束了代码块,作用域是传不到删除操作代码块中的.
