二叉树的遍历
二叉树的遍历指的是按照某种顺序，依次访问二叉树的每个节点，有且访问一次。
二叉树的遍历有以下三种
（1）前序遍历，从根节点，到左子树，再到右子树，简称根左右。
（2）中序遍历，从左节点，到根节点，再到右子树，简称左根右。
（3）后序遍历，从左子树，到右子树，再到根节点，简称左右根。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 display: flex; 13 border:1px solid #000; 14 width: 600px; 15 margin:0 auto; 16 height: 150px; 17 align-items: center; 18 justify-content:center; 19 } 20 .wrap div{ 21 display: flex; 22 height: 70%; 23 width: 44%; 24 margin:0 3%; 25 border:1px solid #000; 26 justify-content:center; 27 align-items: center; 28 background: #fff; 29 } 30 .btn-wrap{ 31 text-align: center; 32 padding-top: 20px; 33 } 34 .btn-wrap button{ 35 display: inline-block; 36 padding:4px 10px; 37 } 38 39 </style> 40 </head> 41 <body> 42 <div class="wrap"> 43 <div> 44 <div> 45 <div> 46 <div></div> 47 <div></div> 48 </div> 49 <div> 50 <div></div> 51 <div></div> 52 </div> 53 </div> 54 <div> 55 <div> 56 <div></div> 57 <div></div> 58 </div> 59 <div> 60 <div></div> 61 <div></div> 62 </div> 63 </div> 64 </div> 65 <div> 66 <div> 67 <div> 68 <div></div> 69 <div></div> 70 </div> 71 <div> 72 <div></div> 73 <div></div> 74 </div> 75 </div> 76 <div> 77 <div> 78 <div></div> 79 <div></div> 80 </div> 81 <div> 82 <div></div> 83 <div></div> 84 </div> 85 </div> 86 </div> 87 </div> 88 <div class="btn-wrap"> 89 <button>前序</button> 90 <button>中序</button> 91 <button>后序</button> 92 </div> 93 <script> 94 var wrap = document.querySelector(".wrap"); 95 var btn_wrap = document.querySelector(".btn-wrap"); 96 var btn1 = btn_wrap.querySelectorAll("button")[0]; 97 var btn2 = btn_wrap.querySelectorAll("button")[1]; 98 var btn3 = btn_wrap.querySelectorAll("button")[2]; 99 var arr = []; 100 var last; 101 var toggle = false; 102 //给按钮绑定事件 103 btn1.onclick = function(){ 104 if(!toggle){ 105 toggle = true; 106 reset(); 107 preOrder(wrap); 108 showWay(); 109 } 110 } 111 btn2.onclick = function(){ 112 if(!toggle){ 113 toggle = true; 114 reset(); 115 inOrder(wrap); 116 showWay(); 117 } 118 } 119 btn3.onclick = function(){ 120 if(!toggle){ 121 toggle = true; 122 reset(); 123 postOrder(wrap); 124 showWay(); 125 } 126 } 127 //二叉树的遍历的三种方式 128 //(1)前序遍历（DLR 129 function preOrder(node){ 130 if(node){ 131 arr.push(node); 132 preOrder(node.firstElementChild); 133 preOrder(node.lastElementChild); 134 } 135 } 136 //(2)中序遍历（LDR） 137 function inOrder(node){ 138 if(node){ 139 inOrder(node.firstElementChild); 140 arr.push(node); 141 inOrder(node.lastElementChild); 142 } 143 } 144 //(3)后序遍历（LRD） 145 function postOrder(node){ 146 if(node){ 147 postOrder(node.firstElementChild); 148 postOrder(node.lastElementChild); 149 arr.push(node); 150 } 151 } 152 //显示遍历的过程 153 function showWay(){ 154 for(var i=0; i<arr.length; i++){ 155 setTimeout(function(i){ 156 return function(){ 157 if(i == arr.length-1){ 158 toggle = false; 159 } 160 if(last){ 161 last.style.background = "white"; 162 } 163 arr[i].style.background = "red"; 164 last = arr[i]; 165 } 166 }(i),i*1000) 167 } 168 } 169 //初始化 170 function reset(){ 171 arr = []; 172 if(last){ 173 last.style.background = "white"; 174 } 175 } 176 </script> 177 </body> 178 </html>