需要实现的任务：
1、点击元素的增添按钮时候，在该节点下增添节点（
可与页面初始化时候的增添函数合并；封装函数；
）
若无子节点，标题前面显示为空；
2、删除节点，当点击删除按钮时候，删除该按钮的父元素
3、
点击元素节点的时候，判断节点下边是否还有节点
如果有，合拢，并将该节点的显示成合拢状态
如果节点的下边无节点，将其打开，节点显示成打开状态
4、查询节点，通过循环树节点，与输入值进行匹配，相同则将
其背景色显示为红色，如果找到的节点处于被父节点折叠隐藏的状态，则需要做对应的展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
display:flex;
align-item:center;
justify-content:center;
background:#096;
font-size:15px;
font-style:"微软雅黑";
color:#000;
font-weight:bold;
}
#tree{
width:400px;
height:400px;
border:1px solid #eee;
background-color:#fff;
margin-top:100px;
position:relative;
padding:20px 20px;
}
#node{
height:350px;
width:350px;
margin:10px 10px 10px 10px;
}
.nodeShow{
width:200px;
line-height:20px;
margin:10px 15px;
}
.nodeHide{
display:none;
}
#footer{
position:absolute;
background:#066;
width:400px;
height:50px;
bottom:0px;
left:0px;
}
#form{
position:absolute;
top:15px;
right:10px;
}
.display{
border:2px solid #000;
display:inline-block;
text-decoration:none;
width:10px;
height:10px;
color:#000;
text-align:center;
vertical-align:top;
line-height:8px;
padding:1px 1px 1px 1px;
}
.add,.del{
margin-left:6px;
display:none;
vertical-align:top;
}
.nodeHead span{
cursor:pointer;
margin-left:3px;
}
.nodeHead:hover >.add,.nodeHead:hover >.del{
display:inline;
cursor:pointer;
}
</style>
</head>
<body>
<div id="tree">
<div class="nodeShow" id="node">
<span class="nodeHead" id="car">
<span class="txt">
<a class="display" href="javascript:;">+</a>
汽车
</span>
<img class="add" src="images/01.png">
</span>
</div>
<div id=footer>
<div id="form">
<input type="text" id="txt"/>
<input type="button" id="btn1" value="查找结点"/>
</div>
</div>
</div>
<script type="text/javascript" src="js/tree.js"></script>
</body>
</html>
JavaScript代码
//增加子元素
function addChild(parent,text){
var img1=document.createElement("img");
var img2=document.createElement("img");
img1.setAttribute("src","images/01.png");
img2.setAttribute("src","images/02.png");
img1.setAttribute("class","add");
img2.setAttribute("class","del");
var display=document.createElement("a");
display.setAttribute("href","javascript:;");
display.setAttribute("class","display");
var word1=document.createTextNode("+");
display.appendChild(word1);
var ospan=document.createElement("span");
var text=document.createTextNode(text);
ospan.setAttribute("class","txt");
ospan.appendChild(display);
ospan.appendChild(text);
var nodeHead=document.createElement("span");
nodeHead.setAttribute("class","nodeHead");
nodeHead.appendChild(ospan);
nodeHead.appendChild(img1);
nodeHead.appendChild(img2);
var nodeShow=document.createElement("div");
nodeShow.setAttribute("class","nodeShow")
nodeShow.appendChild(nodeHead);
parent.appendChild(nodeShow);
}
//树的初始化
var node=document.getElementById("node");
var txtArr=document.getElementsByClassName("txt");
var nodeShowArr=document.getElementsByClassName("nodeShow");
addChild(node,"英国品牌");
addChild(nodeShowArr[1],"路虎");
addChild(nodeShowArr[1],"捷豹");
addChild(node,"德国品牌");
addChild(nodeShowArr[4],"宝马");
addChild(nodeShowArr[4],"奔驰");
addChild(nodeShowArr[4],"奥迪");
addChild(node,"美国品牌");
addChild(nodeShowArr[8],"福特");
addChild(nodeShowArr[8],"林肯");
//遍历数组
function nextsiblings(nodeElement){
if(nodeElement){
arr.push(nodeElement.nextSibling);
nextsiblings(nodeElement.nextSibling);
}
}
for(var i=0;i<txtArr.length;i++){
txtArr[i].onclick=function(){
arr=[];
var self=this;
nextsiblings(this.parentNode);
if(arr.length>1&&foldNode(this.parentNode.parentNode)==true){
for(var j=0;j<arr.length;j++){
if(arr[j].className=="nodeShow"){
arr[j].style.display="none";
console.log(arr[j]);
self.firstChild.innerHTML="-";
}
}
}
}
}
//判断节点是否收拢
function foldNode(nodeElement){
if(nodeElement.childNodes.length>1){
return true;
}
}
var arr=[];
var data=[];
traverseDF(node,data);
//
//js多叉树深度优先遍历
function traverseDF(node,nodeList){
if(node){
nodeList.push(node);
for(var i=0,len=node.children.length;i<len;i++){
if(node.children[i].className=="nodeShow"){
traverseDF(node.children[i],nodeList);
}
}
}
}
//添加浏览器兼容事件
function addEvent(el,type,handler){
if(el.addEventListener){
el.addEventListener(type,handler,false);
}else if(el.attachEvent){
el.attachEvent("on"+type,handler);
}else{
el["on"+type]=handler;
}
}
杰杰就是我