27任务二十四——选中删除添加节点
Posted cjlalala
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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任务二十四——选中删除添加节点的主要内容，如果未能解决你的问题，请参考以下文章