怎么用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展示二叉樹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！