27、任务二十四——选中、删除、添加节点
0、题目
- 基于任务23，添加节点的选择、增加与删除的功能
- 点击某个节点元素，则该节点元素呈现一个特殊被选中的样式
- 增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉
- 增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置
1、解题过程
task24.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE JavaScript Task 24</title> 6 <style> 7 div{ 8 display: inline-block; 9 border:1px solid black; 10 box-sizing: border-box; 11 } 12 .one{ 13 height:140px; 14 padding:10px; 15 } 16 .two{ 17 height:120px; 18 padding:10px; 19 } 20 .three{ 21 height:100px; 22 padding:10px; 23 } 24 .four{ 25 height:80px; 26 padding:10px; 27 } 28 .five{ 29 width:60px; 30 height:60px; 31 } 32 button{ 33 margin:50px; 34 height:30px; 35 width:50px; 36 } 37 .newDiv{ 38 width:50px; 39 height:50px; 40 margin:5px; 41 } 42 </style> 43 </head> 44 <body> 45 <section id="content"> 46 <div id="super" class="one"> 47 Super 48 <div class="two"> 49 Car 50 <div class="three"> 51 Apple 52 <div class="four">Poor</div> 53 <div class="four">Pig</div> 54 <div class="four">Cola</div> 55 <div class="four">Soccer</div> 56 </div> 57 <div class="three"> 58 Phone 59 </div> 60 <div class="three"> 61 <div class="four">Book</div> 62 <div class="four">School</div> 63 </div> 64 </div> 65 <div class="two"> 66 Note 67 <div class="three"> 68 Human 69 <div class="four">Code</div> 70 <div class="four">Operate</div> 71 <div class="four">Mon</div> 72 </div> 73 <div class="three"> 74 Progrom 75 <div class="four"> 76 Bement 77 <div class="five">Cat</div> 78 </div> 79 <div class="four">Glass</div> 80 </div> 81 </div> 82 <div class="two">Fish</div> 83 </div> 84 </section> 85 <button id="button">遍历</button> 86 <input type="text" id="checkContent"> 87 <button id="check">查询</button> 88 <button id="delete">删除</button> 89 <input id="insertContent" type="text"> 90 <button id="insert">插入</button> 91 92 <script type="text/javascript" src="task24.js"></script> 93 </body> 94 </html>
task24.js
1 var tree=document.getElementById("super"), 2 list=[], 3 a=undefined, 4 timer=null, 5 check=document.getElementById("check"), 6 button=document.getElementById("button"); 7 //深度优先遍历 8 function travel(node){ 9 if(node!=null){ 10 list.push(node); 11 for(var i=0;i<node.children.length;i++){ 12 if(node.children[i].nodeType==1){ 13 travel(node.children[i]); 14 } 15 } 16 } 17 } 18 //依次改变数组list中的元素背景颜色 19 function show(a){ 20 var input=document.getElementById('checkContent').value; 21 i = 0; 22 list[i].style.backgroundColor='blue'; 23 timer = setInterval(function () { 24 i++; 25 if (i < list.length) { 26 var content=list[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") ; 27 if(input==content&&content&&a==1){ 28 clearInterval(timer); 29 list[i].style.backgroundColor="red"; 30 list[i-1].style.backgroundColor="#fff"; 31 } 32 else{ 33 list[i-1].style.backgroundColor = '#fff'; 34 list[i].style.backgroundColor = 'blue'; 35 } 36 } 37 else { 38 clearInterval(timer); 39 list[list.length-1].style.backgroundColor = '#fff'; 40 if(a==1) alert("未找到输入的值！"); 41 } 42 },500); 43 } 44 //深度优先遍历 45 button.addEventListener("click",function(){ 46 origin(); 47 travel(tree); 48 show(0); 49 }); 50 //查询函数 51 check.addEventListener("click",function(){ 52 origin(); 53 travel(tree); 54 show(1); 55 }); 56 //初始状态 57 function origin(){ 58 list=[]; 59 clearInterval(timer); 60 var divs=document.getElementsByTagName("div"); 61 for(var i=0;i<divs.length;i++){ 62 divs[i].style.backgroundColor="#fff"; 63 } 64 } 65 66 document.getElementById("content").addEventListener("click",function(e){ 67 var target=e.target; 68 if(target.nodeName!="DIV") return; 69 target.style.backgroundColor="#caf"; 70 //点击元素被删除 71 document.getElementById("delete").onclick=function(){ 72 target.parentNode.removeChild(target); 73 origin(); 74 } 75 //插入节点 76 document.getElementById("insert").onclick=function(){ 77 var insertCont=document.getElementById("insertContent").value; 78 var content=target.innerHTML; 79 target.innerHTML=content+"<div class='newDiv'>"+insertCont+"</div>"; 80 } 81 });
2、遇到的问题
样式的问题，太太太丑了！！！！！！！！！
