之前学数据结构的时候，学了二叉树的先序、中序、后序遍历的方法，并用c语言实现了，下文是用js实现二叉树的3种遍历，并以动画的形式展现出遍历的过程。
整个遍历过程还是采用递归的思想，原理很粗暴也很简单
先序遍历的函数：
function preorder(node){ if(!(node==null)){ plist.push(node); preorder(node.firstelementchild); preorder(node.lastelementchild); } }
中序遍历的函数：
function inorder(node) { if (!(node == null)) { inorder(node.firstelementchild); plist.push(node); inorder(node.lastelementchild); } }
后序遍历的函数：
function postorder(node) { if (!(node == null)) { postorder(node.firstelementchild); postorder(node.lastelementchild); plist.push(node); } }
颜色变化函数：
function changecolor(){ var i=0; plist[i].style.backgroundcolor = 'blue'; timer=setinterval(function(argument){ i++; if(i<plist.length){ plist[i-1].style.backgroundcolor="#fff"; plist[i].style.backgroundcolor="blue"; } else{ plist[plist.length-1].style.backgroundcolor="#fff"; } },500) }
核心代码如上，本来想写深度优先遍历和广度优先遍历。后来发现二叉树深度优先遍历和先序遍历相同。改日总结一下树的bfs和dfs。
全部代码如下：
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <style> .root{ display: flex; padding: 20px; width: 1000px; height: 300px;border: 1px solid #000000; margin: 100px auto; margin-bottom: 10px; justify-content: space-between; } .child_1{ display: flex; padding: 20px; width: 450px; height: 260px;border: 1px solid red; justify-content: space-between; } .child_2{ display: flex; padding: 20px; width: 170px; height: 220px;border: 1px solid green; justify-content: space-between; } .child_3{ display: flex; padding: 20px; width: 35px; height: 180px;border: 1px solid blue; justify-content: space-between; } input{ margin-left: 100px; width: 60px; height: 40px; font:20px italic; } </style> </head> <body> <p class="root"> <p class="child_1"> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> </p> <p class="child_1"> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> </p> </p> <input type="button" value="先序"> <input type="button" value="中序"> <input type="button" value="后序"> <script type="text/javascript" src="遍历.js"></script> </body> </html>
js:
/** * created by hp on 2016/12/22. */ var btn = document.getelementsbytagname('input'), prebtn = btn[0], inbtn = btn[1], postbtn = btn[2], treeroot = document.getelementsbyclassname('root')[0], plist = [], timer = null; window.onload=function(){ prebtn.onclick = function () { reset(); preorder(treeroot); changecolor(); } inbtn.onclick = function () { reset(); inorder(treeroot); changecolor(); } postbtn.onclick = function () { reset(); postorder(treeroot); changecolor(); } } /*先序遍历*/ function preorder(node){ if(!(node==null)){ plist.push(node); preorder(node.firstelementchild); preorder(node.lastelementchild); } } /*中序遍历*/ function inorder(node) { if (!(node == null)) { inorder(node.firstelementchild); plist.push(node); inorder(node.lastelementchild); } } /*后序遍历*/ function postorder(node) { if (!(node == null)) { postorder(node.firstelementchild); postorder(node.lastelementchild); plist.push(node); } } /*颜色变化函数*/ function changecolor(){ var i=0; plist[i].style.backgroundcolor = 'blue'; timer=setinterval(function(argument){ i++; if(i
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
touch事件如何获取滑动距离长度
js+h5+c3实现弹出窗口
以上就是js二叉树的先序中序及后序遍历实现方法的详细内容。