JS二叉树的遍历（前序，中序，后序）

来源：互联网发布：西门子plc伺服编程案例编辑：程序博客网时间：2024/06/07 05:22

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript和树 1</title>
<link rel="stylesheet" type="text/css" href="css/task_2_22.css">
<style>
#wrapper {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 730px;
height: 240px; }

.layer_1 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 340px;
height: 200px; }

.layer_2 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 135px;
height: 160px; }

.layer_3 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 52.5px;
height: 120px; }

/*# sourceMappingURL=task_2_22.css.map */
</style>
</head>
<body>
<div id="wrapper">
<div class="layer_1">
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
</div>
<div class="layer_1">
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
</div>
</div>
<input type="button" id="preOrder" value="前序遍历">
<input type="button" id="midOrder" value="中序遍历">
<input type="button" id="postOrder" value="后序遍历">
<a href="http://www.hhsapce.cn">点击返回个人主页</a>

<script type="text/javascript">
var result = [];//用于存放遍历的dom节点
var timer = null;//定义动画定时器

window.onload = function(){
var headNode = document.getElementById("wrapper");
//为前序遍历按钮绑定事件
document.getElementById("preOrder").onclick = function(){
//环境初始化
// styleReset();
// clearInterval(timer);
result = [];

preOrder(headNode);
startAnimate();
}
//为中序遍历按钮绑定事件
document.getElementById("midOrder").onclick = function(){
//环境初始化
// styleReset();
// clearInterval(timer);
result = [];

inOrder(headNode);
startAnimate();
}
//为后序遍历按钮绑定事件
document.getElementById("postOrder").onclick = function(){
//环境初始化
// styleReset();
// clearInterval(timer);
result = [];

postOrder(headNode);
startAnimate();
}
}
/*
*使用递归的方式前序遍历DOM
* //递归方式，先序遍历先访问根节点，然后以同样的方式访问左子树和右子树
*/

function preOrder(node){
result.push(node);
if(node.firstElementChild !== null){
preOrder(node.firstElementChild);
}
if(node.lastElementChild !== null){
preOrder(node.lastElementChild);
}
}
/*
*使用递归的方式中序遍历DOM
* 中序遍历先访问左子树，再访问根节点，最后访问右子树
*/

function inOrder(node){
if(node.firstElementChild !== null){
inOrder(node.firstElementChild);
}
result.push(node);
if(node.lastElementChild !== null){
inOrder(node.lastElementChild);
}
}
/*
*使用递归的方式后续遍历DOM
* 后序遍历先访问左子树，再访问右子树，最后访问根节点
*/

function postOrder(node){
if(node.firstElementChild !== null){
postOrder(node.firstElementChild);
}
if(node.lastElementChild !== null){
postOrder(node.lastElementChild);
}
result.push(node);
}
//动画开启函数，每隔一秒
function startAnimate(){
var i = 0;
result[i].style.backgroundColor = 'blue';
timer = setInterval(function(){
i++;
if(i < result.length){
result[i-1].style.backgroundColor = '#fff';
result[i].style.backgroundColor = 'blue';
}else{
clearInterval(timer);
result[result.length-1].style.backgroundColor = '#fff';
}
}, 1000)
}
//样式初始化函数
function styleReset(){
var divEles = document.getElementsByTagName("div");
for(var i=0; i<divEles.length;i++){
divEles[i].style.backgroundColor = '#fff';
}
}
</script>
</body>
</html>

0 0