JS树-深度遍历和广度遍历

来源：互联网发布：怎么在淘宝上买微信号编辑：程序博客网时间：2024/04/28 07:23

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task-2-23</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
text-align: center;
}
button {
border:0;
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
padding: 5px;
margin:20px 5px;
cursor: pointer;
background-color: #fff;
}
button:active {
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
div {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.default{
background-color: #fff;
color: black;
}
.active {
background-color: blue;
color: #fff;
}
.found {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<button>深度优先遍历</button>
<button>广度优先遍历</button>
<input />
<button>深度优先搜索</button>
<button>广度优先搜索</button>
<section>
<div id="root">
Super
<div>
Cat
<div>
Apple
<div>Pear</div>
<div>Pig</div>
<div>Cola</div>
<div>Soccer</div>
</div>
<div>Phone</div>
<div>
<div>Book</div>
<div>School</div>
</div>
</div>
<div>
Note
<div>
Human
<div>Code</div>
<div>Operate</div>
<div>Man</div>
</div>
<div>
Program
<div>
Bement
<div>Cat</div>
</div>
<div>Glass</div>
</div>
</div>
<div>Fish</div>
</div>
</section>

<script type="text/javascript">
var timer = null;
var oBtns = document.getElementsByTagName("button");
var rootNode = document.getElementById("root");
var lock = false;
var BFindex = 0;//广度优先遍历自增标识符

// 深度优先遍历
//我们只需要一个栈空间，来压栈就好了。因为深度优先遍历，遍历了根节点后，就开始遍历左子树，所以右子树肯定最后遍历。我们利用栈的性质，先将右子树压栈，然后在对左子树压栈。此时，左子树节点是在top上的，所以可以先去遍历左子树。
function traverseDF(node,nodeList){
if(node){
nodeList.push(node);
for(var i=0;i<node.children.length;i++){
traverseDF(node.children[i],nodeList);
}
}
}

//广度优先遍历
//对于广度优先遍历二叉树，也就是按层次的去遍历。依次遍历根节点，然后是左孩子和右孩子。所以要遍历完当前节点的所有孩子，这样才是层次遍历嘛。根据左右孩子的顺序来输出，所以就是先进先出的原则，那么我们当然就想到了队列这个数据结构
function traverseBF(node, nodeList) {;
if (node) {
nodeList.push(node);
traverseBF(node.nextElementSibling, nodeList);//回传 node的下一个元素对象
node = nodeList[BFindex++];
traverseBF(node.firstElementChild, nodeList);

}
}

//渲染动画，有文本传入则可执行搜索
function traverseRender(nodeList,foundText){
var i = 0;
var len = nodeList.length;
if (nodeList[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") == foundText) {
nodeList[i].className = "found";
lock = false;
clearInterval(timer);
} else {
nodeList[i++].className = "active";
}
lock = true;
timer = setInterval(function(){
if(i<len){
nodeList[i-1].className = "";
if(nodeList[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") == foundText){
nodeList[i].className = "found";
lock = false;
clearInterval(timer);
}
else{
nodeList[i++].className = "active";
}
}
else{
nodeList[i-1].className = "";
lock = false;
clearInterval(timer);
}

},1000);
}

function traverse(traverseIndex){
var Nodelist = [];
var foundList = [];
switch(traverseIndex){
case 0:traverseDF(rootNode,Nodelist);
break;
case 1:BFindex = 0;
traverseBF(rootNode,Nodelist);
break;
case 2:var foundText = document.getElementsByTagName("input")[0].value;
traverseDF(rootNode,Nodelist);
break;
case 3:BFindex = 0;
var foundText = document.getElementsByTagName("input")[0].value;
traverseBF(rootNode,Nodelist);
break;
}
resetBG();
setTimeout(traverseRender(Nodelist,foundText),500);
}

//绑定按钮事件
function init(){
for(var i=0;i<oBtns.length;i++){
(function(i){
oBtns[i].onclick = function(){
if(lock === true){
alert("正在遍历中!");
}
else{
traverse(i);
}
};
}(i));
}
}

// 重置所谓节点样式
function resetBG(){
var nodeList = [];
traverseDF(rootNode,nodeList);
for(var i=0;i<nodeList.length;i++){
nodeList[i].className = "default";
}
}

init();
</script>
</body>
</html>

0 0