怎么用DOM与CSS展示二叉树

这篇文章主要介绍“怎么用DOM与CSS展示二叉树”，在日常操作中，相信很多人在怎么用DOM与CSS展示二叉树问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用DOM与CSS展示二叉树”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

什么是二叉树

首先看一下二叉树的定义：

一颗二叉树是由一个根结点和一个左子树和一颗右子树组成的结构，其左右子树分别又是一颗二叉树。

画成图就是下面这种形状：

           1

          / \

         /   \

        2     3

       / \   / \

      4   5 6   7

     / \

    8   9

关于二叉树的更多内容已经超出了本文的讨论范围，有兴趣的同学可以自行维基百科或者找其它相关的资料。

如何展示二叉树

现成的工具当然也有不少，比如 LeetCode 的自测数据输入框。一开始我也想要不自己做个这样的好了，但是细细想，感觉还蛮复杂的，每层的树的数量不确定，而且越往下层树的结点越多，真要想通过一颗树生成一个漂亮的图片，不管是 SVG 还是画在 canvas 里，都是相当复杂的。

这是其一，其二是展示成图片的话还不利于交互，万一以后想要与展示出来的结构做些简单的交互，图片很显然是不行的，Canvas 实现交互需要计算坐标；SVG 虽然可以为结点绑定事件，但 SVG 的另一个问题是元素之间不能嵌套，虽然有 g 标签，但 g 标签其实只是对 SVG 中的标签进行分组，而不是实现树状（或递归）的嵌套，所以想要容易的在 SVG 里画出树也并不会比在 Canvas 里容易，一样需要计算每个结点的大小和坐标。

于是我就想，能不能用 html 跟 CSS 来显示一颗树的视觉结构呢？毕竟 CSS 可以方便的实现多级菜单，而多级菜单的本质其实就是多叉树。

经过简单的分析，我总结出如下几点：

首先，DOM 的结构就是树状的，用它来显示同为树结构的二叉树应该是相当容易的

第二，目前 CSS 有非常强大的布局功能，用上所有 CSS 最新的功能，可以很容易的实现非常灵活的布局

第三，用 DOM 来展示树结构，可以很方便的实现交互

从二叉树的定义来看，它是一个递归结构，根结点的左子树与右子树分别又是一颗二叉树，所以只要把一颗树考虑成其根结点、左子树和右子树就可以了，而左右子树的结构跟根结点一样，就像级联菜单一样，那么不难构想出如下 DOM 结构：

<div class="tree">

  <span>根结点</span>

  <div>【左子树】</div>

  <div>【右子树】</div>

</div>

其中左子树与右子树的 DOM 结构依然是你上面看到的这种，由于左右子树自身已经被一个 div.tree 元素包着，所以上面的结构其实并不需要里面的两个 div，而且去掉两个额外的 div 会在后面为我们带来一些便利，我们可以方便的用 CSS 仅选择表示叶子结点的 span 元素：span:only-child。

那么前面那颗二叉树如果按照上面的结构写成 DOM 将会是下面这样的（为了方便观察，把结点用【】括起来了）：

<div class="tree">

  <span class="leaf-node">【1】</span>

  <div class="tree">

    <span class="leaf-node">【2】</span>

    <div class="tree">

      <span class="leaf-node">【4】</span>

      <div class="tree">

        <span class="leaf-node">【8】</span>

      </div>

      <div class="tree">

        <span class="leaf-node">【9】</span>

      </div>

    </div>

    <div class="tree">

      <span class="leaf-node">【5】</span>

    </div>

  </div>

  <div class="tree">

    <span class="leaf-node">【3】</span>

    <div class="tree">

      <span class="leaf-node">【6】</span>

    </div>

    <div class="tree">

      <span class="leaf-node">【7】</span>

    </div>

  </div>

</div>

到此，关于“怎么用DOM与CSS展示二叉树”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！