需要實(shí)現(xiàn)的任務(wù)：? ? ? ? ? ? ? ? 1、點(diǎn)擊元素的增添按鈕時(shí)候，在該節(jié)點(diǎn)下增添節(jié)點(diǎn)（? ? ? ? ? ? ? ? ? ? ?可與頁面初始化時(shí)候的增添函數(shù)合并；封裝函數(shù)；? ? ? ? ? ? ? ? ? ?）? ? ? ? ? ? ? ? ? ?若無子節(jié)點(diǎn)，標(biāo)題前面顯示為空；? ? ? ? ? ? ? ? 2、刪除節(jié)點(diǎn)，當(dāng)點(diǎn)擊刪除按鈕時(shí)候，刪除該按鈕的父元素? ? ? ? ? ? ? ? 3、? ? ? ? ? ? ? ? ? ?點(diǎn)擊元素節(jié)點(diǎn)的時(shí)候，判斷節(jié)點(diǎn)下邊是否還有節(jié)點(diǎn)? ? ? ? ? ? ? ? ? ?如果有，合攏，并將該節(jié)點(diǎn)的顯示成合攏狀態(tài)? ? ? ? ? ? ? ? ? ?如果節(jié)點(diǎn)的下邊無節(jié)點(diǎn)，將其打開，節(jié)點(diǎn)顯示成打開狀態(tài)? ? ? ? ? ? ? ? 4、查詢節(jié)點(diǎn)，通過循環(huán)樹節(jié)點(diǎn)，與輸入值進(jìn)行匹配，相同則將? ? ? ? ? ? ? ? ? ?其背景色顯示為紅色，如果找到的節(jié)點(diǎn)處于被父節(jié)點(diǎn)折疊隱藏的狀態(tài)，則需要做對(duì)應(yīng)的展開<!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>無標(biāo)題文檔</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="查找結(jié)點(diǎn)"/>? ? ?</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,"英國(guó)品牌");addChild(nodeShowArr[1],"路虎");addChild(nodeShowArr[1],"捷豹");addChild(node,"德國(guó)品牌");addChild(nodeShowArr[4],"寶馬");addChild(nodeShowArr[4],"奔馳");addChild(nodeShowArr[4],"奧迪");addChild(node,"美國(guó)品牌");addChild(nodeShowArr[8],"福特");addChild(nodeShowArr[8],"林肯");//遍歷數(shù)組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="-";? ? ?}?? ? }? ?}? } ?}//判斷節(jié)點(diǎn)是否收攏function foldNode(nodeElement){? ? if(nodeElement.childNodes.length>1){? ? ?return true;??}}var arr=[];var data=[];traverseDF(node,data);////js多叉樹深度優(yōu)先遍歷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;? }?}
我寫的代碼為嘛不停地報(bào)TypeError: arr[j] is null？還有汽車前面那個(gè)符號(hào)也不變化？請(qǐng)大神幫忙看看嘛
我背后有個(gè)胖子
2016-12-22 11:18:06
