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

实现截图


功能分析

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

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


原理说明

  • 先序遍历:即先“根”序遍历,遍历由树的根节点开始,顺序为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:后序遍历记录的应为流经节点右侧的节点。
    <br />


实现过程

<br />

HTML部分

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

<div class="parentNode">
    <div class="childNode1">
      <div class="childNode2">
        <div class="childNode3"></div>
        <div class="childNode3"></div>
      </div>
      <div class="childNode2">
        <div class="childNode3"></div>
        <div class="childNode3"></div>
      </div>
    </div>
    <div class="childNode1">
      <div class="childNode2">
        <div class="childNode3"></div>
        <div class="childNode3"></div>
      </div>
      <div class="childNode2">
        <div class="childNode3"></div>
        <div class="childNode3"></div>
      </div>
    </div>
  </div>

<br />

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;
}

<br />

JS部分
  • 遍历函数
    三个函数的区别仅仅是函数体部分三行的位置不同,也代表了遍历顺序的不同。用<code>visitedList[]</code>来保存访问过的节点,在之后进行可视化操作的时候会用到。
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);
   }
}

<br />

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

}

<br />

  • 清空函数
    将所有div的背景都设为白色。
//清空函数
var clear = function(){
  var div = document.getElementsByTagName("div");
  for(var index = 0;index < div.length;index++){
    div[index].style.backgroundColor = "#fff";
  }
}

<br />

  • 事件处理程序
    与上一次的<code>btn.onclick = function(){}</code>不同,这次使用了<code>addEventListener</code>,他们具体的比较,我将在下一篇博文中进行总结。每一次调用遍历函数前,<code>visitedList = [];</code>作清空用。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);

<br />


总结

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


demo地址

https://github.com/escawn/dailyDemo/tree/master/jsTreeVisit
<br />
<br />

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 树的概述 树是一种非常常用的数据结构,树与前面介绍的线性表,栈,队列等线性结构不同,树是一种非线性结构 1.树的定...
    Jack921阅读 4,369评论 1 31
  • 1 序 2016年6月25日夜,帝都,天下着大雨,拖着行李箱和同学在校门口照了最后一张合照,搬离寝室打车去了提前租...
    RichardJieChen阅读 5,011评论 0 12
  • 二叉树的三种常用遍历方式 学习过数据结构的同学都清楚,除了层序遍历外,二叉树主要有三种遍历方式: 1. 先序遍历...
    SherlockBlaze阅读 1,176评论 0 4
  • 一、 C/C++程序基础 面试例题1——分析代码写输出(一般赋值语句的概念和方法)。 面试例题2—...
    LuckTime阅读 1,913评论 2 42
  • 如何阅读一本书? 读王者速读发告诉我们5-5-20法则,超级快速阅读告诉我们视觉卡片的重要性,输入及要输出。 如何...
    三鱼甘阅读 181评论 0 0