0、题目
- 基于任务23，添加节点的选择、增加与删除的功能
- 点击某个节点元素，则该节点元素呈现一个特殊被选中的样式
- 增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉
- 增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置
1、解题过程
task24.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE JavaScript Task 24</title>
<style>
div{
display: inline-block;
border:1px solid black;
box-sizing: border-box;
}
.one{
height:140px;
padding:10px;
}
.two{
height:120px;
padding:10px;
}
.three{
height:100px;
padding:10px;
}
.four{
height:80px;
padding:10px;
}
.five{
width:60px;
height:60px;
}
button{
margin:50px;
height:30px;
width:50px;
}
.newDiv{
width:50px;
height:50px;
margin:5px;
}
</style>
</head>
<body>
<section id="content">
<div id="super" class="one">
Super
<div class="two">
Car
<div class="three">
Apple
<div class="four">Poor</div>
<div class="four">Pig</div>
<div class="four">Cola</div>
<div class="four">Soccer</div>
</div>
<div class="three">
Phone
</div>
<div class="three">
<div class="four">Book</div>
<div class="four">School</div>
</div>
</div>
<div class="two">
Note
<div class="three">
Human
<div class="four">Code</div>
<div class="four">Operate</div>
<div class="four">Mon</div>
</div>
<div class="three">
Progrom
<div class="four">
Bement
<div class="five">Cat</div>
</div>
<div class="four">Glass</div>
</div>
</div>
<div class="two">Fish</div>
</div>
</section>
<button id="button">遍历</button>
<input type="text" id="checkContent">
<button id="check">查询</button>
<button id="delete">删除</button>
<input id="insertContent" type="text">
<button id="insert">插入</button>
<script type="text/javascript" src="task24.js"></script>
</body>
</html>
task24.js
var tree=document.getElementById("super"),
list=[],
a=undefined,
timer=null,
check=document.getElementById("check"),
button=document.getElementById("button");
//深度优先遍历
function travel(node){
if(node!=null){
list.push(node);
for(var i=0;i<node.children.length;i++){
if(node.children[i].nodeType==1){
travel(node.children[i]);
}
}
}
}
//依次改变数组list中的元素背景颜色
function show(a){
var input=document.getElementById(‘checkContent‘).value;
i = 0;
list[i].style.backgroundColor=‘blue‘;
timer = setInterval(function () {
i++;
if (i < list.length) {
var content=list[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") ;
if(input==content&&content&&a==1){
clearInterval(timer);
list[i].style.backgroundColor="red";
list[i-1].style.backgroundColor="#fff";
}
else{
list[i-1].style.backgroundColor = ‘#fff‘;
list[i].style.backgroundColor = ‘blue‘;
}
}
else {
clearInterval(timer);
list[list.length-1].style.backgroundColor = ‘#fff‘;
if(a==1) alert("未找到输入的值！");
}
},500);
}
//深度优先遍历
button.addEventListener("click",function(){
origin();
travel(tree);
show(0);
});
//查询函数
check.addEventListener("click",function(){
origin();
travel(tree);
show(1);
});
//初始状态
function origin(){
list=[];
clearInterval(timer);
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].style.backgroundColor="#fff";
}
}
document.getElementById("content").addEventListener("click",function(e){
var target=e.target;
if(target.nodeName!="DIV") return;
target.style.backgroundColor="#caf";
//点击元素被删除
document.getElementById("delete").onclick=function(){
target.parentNode.removeChild(target);
origin();
}
//插入节点
document.getElementById("insert").onclick=function(){
var insertCont=document.getElementById("insertContent").value;
var content=target.innerHTML;
target.innerHTML=content+"<div class=‘newDiv‘>"+insertCont+"</div>";
}
});
2、遇到的问题
样式的问题，太太太丑了！！！！！！！！！
时间： 2024-11-06 18:29:35