Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to display binary trees with DOM and CSS". In daily operation, I believe many people have doubts about how to display binary trees with DOM and CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to show binary trees with DOM and CSS". Next, please follow the editor to study!

What is a binary tree?

First, take a look at the definition of binary tree:

A binary tree is a structure composed of a root node, a left subtree and a right subtree, and its left and right subtrees are a binary tree respectively.

The shape of the drawing is as follows:

one

/\

/\

2 3

/ /

4 5 6 7

/\

8 9

More information about binary tree is beyond the scope of this article. Students who are interested can find their own Wikipedia or other relevant materials.

How to show a binary tree

Of course, there are many off-the-shelf tools, such as LeetCode's self-test data input box. At first, I didn't want to do this by myself, but when I think about it, it's quite complicated, the number of trees on each layer is uncertain, and there are more and more nodes in the lower layer of the tree. If you really want to generate a beautiful picture through a tree, whether it's SVG or painted in Canvas, it's very complicated.

This is one of them, and the other is that it is not conducive to interaction if it is displayed as a picture. In case you want to do some simple interaction with the displayed structure in the future, the picture is obviously not good. Canvas needs to calculate coordinates for interaction. Although SVG can bind events for nodes, another problem with SVG is that elements cannot be nested. Although there is a g tag, the g tag is actually a grouping of tags in SVG, not tree (or recursive) nesting, so it is not easy to draw a tree in SVG than in Canvas, and you also need to calculate the size and coordinates of each node.

So I thought, can we use HTML and CSS to show the visual structure of a tree? After all, CSS can easily implement multi-level menus, and the essence of multi-level menus is multi-tree.

After a simple analysis, I sum up the following points:

First of all, the structure of DOM is tree-like, and it should be quite easy to use it to display binary trees with the same tree structure.

Second, at present, CSS has a very powerful layout function, using all the latest features of CSS, you can easily achieve a very flexible layout.

Third, using DOM to show the tree structure, it is very convenient to achieve interaction.

According to the definition of a binary tree, it is a recursive structure, and the left and right subtrees of the root node are a binary tree respectively, so as long as a tree is considered as its root node, left subtree and right subtree, and the structure of the left and right subtree is the same as the root node, just like the cascading menu, it is not difficult to conceive the following DOM structure:

Root node

[left subtree]

[right subtree]

Among them, the DOM structure of the left and right subtrees is still the kind you saw above, because the left and right subtrees themselves have been wrapped by a div.tree element, so the above structure actually does not need two div inside, and removing two additional div will bring us some convenience later, we can easily use CSS to choose only the span element that represents the leaf node: span:only-child.

So if the previous binary tree is written as DOM according to the above structure, it will look like this (to facilitate observation, enclose the node in []):

[1]

[2]

[4]

[8]

[9]

[5]

[3]

[6]

[7]

At this point, the study on "how to display a binary tree with DOM and CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.