js实现二叉树遍历

最新推荐文章于 2023-06-26 14:20:22 发布

夏目斑~

最新推荐文章于 2023-06-26 14:20:22 发布

阅读量1.2k

点赞数

分类专栏：学习笔记文章标签：二叉树 javascript

本文链接：https://blog.csdn.net/wangkaiyuan110/article/details/72846908

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>遍历树</title>
    <style type="text/css">
        html,body{width:100%;height:100%;}
        div{height:50%; padding:20px;   display: flex;flex-flow: row;justify-content: space-around;border:1px solid #000; margin:auto;}
        p{ text-align: center; }
    </style>
</head>
<body>
    <div id="root">
        <div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
  <p>
  <input id="pre" type="button" value="前序遍历">
  <input id="middle" type="button" value="中序遍历">
  <input id="last" type="button" value="后序遍历">
  </p>
  <script type="text/javascript">
      (function(){
        var oRoot=document.getElementById("root");
        function Node(value,left,right,parent){//设置节点
            this.value=value;
            this.left=left;
            this.right=right;
            this.parent=parent;
        }
        var arrayPre=new Array();
        var run=function(obj,p){//遍历dom节点
            var node=new Node();
            node.value=obj;
            node.parent=p;
            if(obj.children.length>0){
                if(!!obj.children[0]){
                    node.left=obj.children[0];
                    arguments.callee(obj.children[0],obj);
                }
                if(!!obj.children[1]){
                    node.right=obj.children[1];
                    arguments.callee(obj.children[1],obj);
                }
            }
            arrayPre.push(node);
        };
        var nodeArray=arrayPre;
        var changNode=function(argument) {//确定节点间的关系
            for(var i=0,len=argument.length;i<len;i++){
                for(var j=0;j<len;j++){
                    if(argument[i].left==argument[j].value){
                        argument[i].left=argument[j];
                    }
                    if(argument[i].right==argument[j].value){
                        argument[i].right=argument[j];
                    }
                }
            }
        };
        var showRed=function(obj){
            obj.style.background="red";
        }
        var showWhite=function(obj){
            var divs=document.getElementsByTagName("div");
            for(var i=0,len=divs.length;i<len;i++){
                divs[i].style.background="#fff";
            }
        }
        var pIndex=-5;
        var printPre=function(obj){//打印节点
            var ar=arguments;
            pIndex++;
            (function(o,pi){
                setTimeout(function(){
                    showWhite();
                    showRed(o.value);
                },500*pi);
            })(obj,pIndex);
            pIndex++;
            if(!!obj.left){
                ar.callee(obj.left);
            }

            pIndex++;
            if(!!obj.right){
                ar.callee(obj.right);
            }

        };
        var printMiddle=function(obj){
            var ar=arguments;

            pIndex++;
            if(!!obj.left){
                ar.callee(obj.left);
            }
            pIndex++;
            (function(o,pi){
                setTimeout(function(){
                    showWhite();
                    showRed(o.value);
                },500*pi);
            })(obj,pIndex);
            pIndex++;
            if(!!obj.right){
                ar.callee(obj.right);
            }

        };
        var printLast=function(obj){
            var ar=arguments;

            pIndex++;
            if(!!obj.left){
                ar.callee(obj.left);
            }

            pIndex++;
            if(!!obj.right){
                ar.callee(obj.right);
            }
            pIndex++;
            (function(o,pi){
                setTimeout(function(){
                    showWhite();
                    showRed(o.value);
                },500*pi);
            })(obj,pIndex);

        };
        var oPre=document.getElementById("pre");
        var oMiddle=document.getElementById("middle");
        var oLast=document.getElementById("last");

        oPre.onclick=function(){
            pIndex=0;
            run(oRoot,oRoot);
            changNode(arrayPre);
            printPre(arrayPre[arrayPre.length-1]);

        };
        oMiddle.onclick=function(){
            pIndex=-5;
            run(oRoot,oRoot);
            changNode(arrayPre);
            printMiddle(arrayPre[arrayPre.length-1]);

        };
        oLast.onclick=function(){
            pIndex=-5;
            run(oRoot,oRoot);
            changNode(arrayPre);
            printLast(arrayPre[arrayPre.length-1]);

        };

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