大神們在這段代碼中我增加一個輸入框及一個“查詢”按鈕，點擊按鈕時，開始在樹中以動畫形式查找節(jié)點內(nèi)容和輸入框中內(nèi)容一致的節(jié)點，找到后以特殊樣式顯示該節(jié)點為紅色，可是前三個為什么遍歷查找不到呢？<!DOCTYPE html><html><head>? <meta charsHeyet="UTF-8">? <title>多叉樹</title><style>? #rooter{? ? ? ? ? display:flex;? ? ? ? ? display:-webkit-flex;? ? ? ? ? flex-flow:row nowrap; ? ? ? ? ?? ? ? ? ? width:1300px;? ? ? ? ? height:150px;? ? ? ? ? border:1px solid #333;? ? ? ? ? font-size:12px;? ? ? ? ? }? #Child1{? ? ? ? ? display:flex;? ? ? ? ? display:-webkit-flex;? ? ? ? ? flex-flow:row nowrap; ?? ? ? ? ? margin:auto;? ? ? ? ? width:500px;? ? ? ? ? height:140px;? ? ? ? ? border:1px solid #333;? ? ? ? ? ?}? #Apple{? ? ? ? ? display:flex;? ? ? ? ? display:-webkit-flex;? ? ? ? ? flex-flow:row nowrap; ?? ? ? ? ? margin:auto;? ? ? ? ? width:250px;? ? ? ? ? height:120px;? ? ? ? ? border:1px solid #333;? ? ? ?}?#Poor{? ? ? ? ? margin:auto;? ? ? ? ? width:50px;? ? ? ? ? height:85px;? ? ? ? ? border:1px solid #333;? ? ? ?}?#Pig{? ? ? ? ? margin:auto;? ? ? ? ? width:30px;? ? ? ? ? height:85px;? ? ? ? ? border:1px solid #333;? ? ? ?}#Cola{? ? ? ? ? margin:auto;? ? ? ? ? width:30px;? ? ? ? ? height:85px;? ? ? ? ? border:1px solid #333; ?? ? ? }#Soccor{? ? ? ? ? margin:auto;? ? ? ? ? width:40px;? ? ? ? ? height:85px;? ? ? ? ? border:1px solid #333;? ? ? ?}#Phone{ ? margin:auto;? ? ? ? ? width:85px;? ? ? ? ? height:120px;? ? ? ? ? border:1px solid #333;? ? ? ?}#Bs{ ? ? ?? ? ? ? ? display:flex;? ? ? ? ? display:-webkit-flex;? ? ? ? ? flex-flow:row nowrap;?? ? ? ? ? margin:auto;? ? ? ? ? width:120px;? ? ? ? ? height:120px;? ? ? ? ? border:1px solid #333;? ?}#Book{? ? ? ? ? margin:auto;? ? ? ? ? width:40px;? ? ? ? ? height:40px;? ? ? ? ? border:1px solid #333;? ? ?}#School{? ? ? ? ? margin:auto;? ? ? ? ? width:40px;? ? ? ? ? height:40px;? ? ? ? ? border:1px solid #333;? ? ?}#Human,#Program{? ? ? ? ? display:flex;? ? ? ? ? display:-webkit-flex;? ? ? ? ? flex-flow:row nowrap;?? ? ? ? ? margin:auto;? ? ? ? ? width:230px;? ? ? ? ? height:120px;? ? ? ? ? border:1px solid #333;? ? ?}#Man,#Code,#Class{? ? ? ? ? ?margin:auto;? ? ? ? ? ?width:50px;? ? ? ? ? ?height:85px;? ? ? ? ? ?border:1px solid #333;? ? ?}#Element{? ? ? ? ? display:flex;? ? ? ? ? display:-webkit-flex;? ? ? ? ? flex-flow:row nowrap;?? ? ? ? ? margin:auto;? ? ? ? ? width:110px;? ? ? ? ? height:85px;? ? ? ? ? border:1px solid #333;? ? }#Gots{? ? ? ? ? ?margin:auto;? ? ? ? ? ?width:60px;? ? ? ? ? ?height:60px;? ? ? ? ? ?border:1px solid #333;? ? ? }#Operate{? ? ? ? ? ?margin:auto;? ? ? ? ? ?width:75px;? ? ? ? ? ?height:85px;? ? ? ? ? ?border:1px solid #333;? ? ?}#Fish{ ? margin:auto;? ? ? ? ? ?width:200px;? ? ? ? ? ?height:140px;? ? ? ? ? ?border:1px solid #333;? ? ? ? }</style></head><body>? <div id="rooter" >Super? ? ? <div id="Child1">Call? ? ? ? ? ?<div id="Apple">Apple? ? ? ? ? ? ?<div id="Poor">Poor</div>? ? ? ? ? ? ?<div id="Pig">Pig</div>? ? ? ? ? ? ?<div id="Cola">Cola</div>? ? ? ? ? ? ?<div id="Soccor">Soccor</div>? ? ? ? ? ? </div>? ? ? ? ? ?<div id="Phone">Phone</div>? ? ? ? ? ?? ? ? ? ? ?<div id="Bs">? ? ? ? ? ? ?<div id="Book">Book</div>? ? ? ? ? ? ?<div id="School">School</div>? ? ? ? ? ?</div>? ? ? ?</div>? ? ? <div id="Child1">Note? ? ? ? ? ?<div id="Human">Human? ? ? ? ? ? ? ?<div id="Code">Code</div>? ? ? ? ? ? ? ?<div id="Operate">Operate</div>? ? ? ? ? ? ? ?<div id="Man">Man</div>? ? ? ? ? ?</div>? ? ? ? ? ?<div id="Program">Program? ? ? ? ? ? ? ? <div id="Element">Element? ? ? ? ? ? ? ? ? <div id="Gots">Gots</div>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? <div id="Class">Class</div>? ? ? ? ? ?</div>? ? ? </div>? ? ? <div id="Fish">Fish</div>? ?</div>?? <input type="text"/>? <input type="button" value="查詢">? <input type="button" value="遍歷">?<script>var inputs=document.getElementsByTagName("input");var rooter=document.getElementById("rooter");var data=[];var timer=null;var lock=false;//添加瀏覽器兼容事件?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;? ?}}//js多叉樹深度優(yōu)先遍歷function traverseDF(node,nodeList){? ? ?if(node){? ? ? ? ? nodeList.push(node);? ? ? ? ? for(var i=0,len=node.children.length;i<len;i++){? ? ? ? ? ? ? traverseDF(node.children[i],nodeList);? ? ?} ??? ?}?}//添加事件點擊函數(shù)addEvent(inputs[1],"click",function(){? ? var value=inputs[0].value;? ? ?renter(); ?? ? ?traverseDF(rooter,data);? ? ?changeColor();});addEvent(inputs[2],"click",function(){? ? ? ? renter();? ? ? ? traverseDF(rooter,data);? ? ? ? changeColor(); ? ? ? ? ? ? ??});//變色函數(shù)function changeColor(){? ? var i=0;? ?var value=inputs[0].value.trim(); ?? ?data[i].style.background="blue";?? ?timer=setInterval(function(){? ? ?i++;? ? ?if(i<data.length){? ? ? ? data[i].style.background="blue";? ? ? ? data[i-1].style.background="#fff";? ? ? ? ? if(data[i].innerText.localeCompare(value)===0){? ? ? ? ? ? ?data[i].style.background="red";? ? ? ? ?} ? ??? ? ?}else{? ? ? ? clearInterval(timer);? ? ? ? data[data.length-1].style.background="#fff";? ? ?} ? ??? },500); ??}//初始化樣式function renter(){? ? data=[];? ? clearInterval(timer);? ? var divs=document.getElementsByTagName("div");? ? for(var i=0;i<divs.length;i++){? ? ? ? divs[i].style.background="#fff";? }}</script></body></html>
請大神們幫忙看看這段JS關(guān)于多叉樹遍歷代碼，謝謝
我背后有個胖子
2016-12-12 20:05:58
