这篇文章主要介绍“怎么用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展示二叉树”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
