html用div做出一颗树的效果,练手demo之使用js遍历一棵树

实现截图

功能分析

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

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

原理说明

先序遍历：即先“根”序遍历，遍历由树的根节点开始，顺序为root->leftChild->rightChild.

示例图中的顺序应为：

A->B->D->H->I->E->J->K->C->F->L->M->G->N->O

Tips：有一个小技