练手demo之使用js遍历一棵树

实现截图

---

功能分析

• 两个区域：一个展示区域，一个操作区域。展示区域以div盒子相套（dom）来描述树的结构，操作区域有三种遍历方式可供选择点击。

• 事件：当点击先序遍历时，div盒子的背景会以遍历顺序依次亮起，以此展示遍历过程，当遍历完成后，页面会恢复原样，以供下一次操作。
  
  

---

原理说明

• 先序遍历：即先“根”序遍历，遍历由树的根节点开始，顺序为root->leftChild->rightChild.
  示例图中的顺序应为：
  A->B->D->H->I->E->J->K->C->F->L->M->G->N->O
  Tips：有一个小技巧可以快速分析遍历顺序。从左开始依次流过各个节点，当流经某个节点的左侧，即记录这个节点，当最后流回根节点时，记录下的节点顺序即为遍历顺序。

• 中序遍历：即中“根”序遍历，遍历由节点的左孩子节点起，只要存在左孩子节点，就会一直遍历下去，直到节点不存在左孩子节点了，才会再依次遍历根节点、右孩子节点。顺序为leftChild->root->rightChild.
  示例图中的顺序应为：
  H->D->I->B->J->E->K->A->L->F->M->C->N->G->O
  Tips：与先序遍历相似，这里的技巧是，流动过程中记录下流经节点下部的节点，最后记录下的节点顺序即为遍历顺序。

• 后序遍历：即后“根”序遍历，依次访问左孩子、右孩子节点，直到再没有孩子节点可以访问了，以访问根节点结束。顺序为leftChild->rightChild->root.
  示例图中的顺序应为：
  H->I->D->J->K->E->B->L->M->F->N->O->G->C->A
  Tips：后序遍历记录的应为流经节点右侧的节点。
  
  

---

实现过程

HTML部分

这一部分主要涉及DOM模型，实现树的构造。childNode后的标号代表层级。

CSS部分

使用了flex布局，使得下一级的div能够均匀地被包括在上一级的div内

.parentNode{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 800px;
  height: 400px;
  border: 1px solid #000;
  margin: 20px auto;
}

JS部分

• 遍历函数
  三个函数的区别仅仅是函数体部分三行的位置不同，也代表了遍历顺序的不同。用visitedList[]来保存访问过的节点，在之后进行可视化操作的时候会用到。

var preOrder = function(node){
    if (node !== null) {
    visitedList.push(node);
    preOrder(node.firstElementChild);
    preOrder(node.lastElementChild);
    }
}

//中序遍历
var inOrder = function(node){
   if (node !== null) {
   inOrder(node.firstElementChild);
   visitedList.push(node);
   inOrder(node.lastElementChild);
   }
}

//后序遍历
var postOrder = function(node){
   if (node !== null) {
   postOrder(node.firstElementChild);
   postOrder(node.lastElementChild);
   visitedList.push(node);
   }
}

• 渲染函数
  依次将访问过的节点从数组中取出，用currentNode保存，然后给其设置样式。clear()函数用来清空上一次函数调用时给currentNode设置的样式。这样视觉上就呈现出了闪烁的视觉效果。

//渲染函数，呈现视觉效果用
var render = function(){
  var int = setInterval(function(){
    clear();
    var currentNode;
    currentNode = visitedList.shift();
    if (currentNode !== undefined) {
      currentNode.style.backgroundColor = "red";

    }
    else {
      window.clearInterval(int);
    }
  },500);

}

• 清空函数
  将所有div的背景都设为白色。

//清空函数
var clear = function(){
  var div = document.getElementsByTagName("div");
  for(var index = 0;index < div.length;index++){
    div[index].style.backgroundColor = "#fff";
  }
}

• 事件处理程序
  与上一次的btn.onclick = function(){}不同，这次使用了addEventListener，他们具体的比较，我将在下一篇博文中进行总结。每一次调用遍历函数前，visitedList = [];作清空用。V、L和R分别为根、左孩子和右孩子。我以他们的顺序为简写给按钮取了名。

var btn = document.getElementsByClassName('button')[0];
  btn.addEventListener("click",function(e){
    if (e.target&&e.target.className == "VLR") {
      visitedList = [];
      preOrder(parent);
      render();
    }
    if (e.target&&e.target.className == "LVR") {
      visitedList = [];
      inOrder(parent);
      render();
    }
    if (e.target&&e.target.className == "LRV") {
      visitedList = [];
      postOrder(parent);
      render();
    }
  },false);

---

总结

这个demo不论从逻辑还是实现上来说都比较简单。但我还是在涉及到DOM操作时，关于node的概念上出现了问题，基础还是要多补补。

---

demo地址

https://github.com/escawn/dailyDemo/tree/master/jsTreeVisit