首页 > 代码库 > 27、任务二十四——选中、删除、添加节点
27、任务二十四——选中、删除、添加节点
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、遇到的问题
样式的问题，太太太丑了！！！！！！！！！
27、任务二十四——选中、删除、添加节点
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。