JS: Trees
2026-02-21 02:49 Diff
https://hexlet.io/courses/js-trees/lessons/html/theory_unit

Tree structures are found in many different areas, such as family trees, file systems, etc. In this lesson, we'll learn about the HTML markup tree common for web development.

The root is the html tag. It is important to note that some tags can't have nested tags within them, such as hr and input.

Let's try to define this tree with a structure that would be easy to work with. The first step is to define the properties of each tag. At the very least, we can distinguish certain properties, such as name, type, class, and children. In reality, there are many more of these properties, but these are enough for us now. Now define the HTML tree with this structure:

The main property in each node is the node type. Our tree has tags and text. Text can be embedded in a tag, i.e., it can be a descendant. Therefore, the text is a leaf node. We also have some tags that are leaf nodes, so there are two types allocated for tags tag-internal is for internal nodes, these are tags that can have children; tag-leaf is for leaf nodes, these are tags that cannot have children. So we only need to define two types of nodes for our HTML tree:

  • tag-internal - tags that can have children. These are internal nodes
  • tag-leaf - tags that cannot have children. These are leaf nodes
  • text - plain text. These are leaf nodes

Now we can work with our tree. For example, filter out all the empty tags. To do this, we must first determine how to filter each type. Each type is filtered differently:

  • tag-internal - if there are no children or all children are empty, then the parent is also empty
  • tag-leaf - can't have children, this tag is always displayed
  • text - text nodes can't have children, but they can contain text, so we filter for empty content

The filtering function will look like this:

The filter takes a tag-internal node as a parameter and processes the elements nested in it. First, we go through all the descendants and filter all the tag-internal ones, using our own function (recursion) to also filter the nested elements. Then we call the filter() method, where each type is filtered according to the logic we defined.

After filtering, we get this tree:

This tree does not contain a div element with the hexlet-community class, even though it contained other elements. This happened because its empty descendants were filtered out before filtering the parent. Now you can build the tree into a string:

If you indent and put each tag on a new line, you will end up with html without empty tags:

The code for handling trees looks short and sweet. This is a consequence of the convenient structure for representing the HTML tree. Having identified several types of nodes in this tree, all that remains is to describe the logic for each type. Any internal node is in the same tree, so it is processed recursively by the same function. Presenting the proper structure makes processing trees significantly simpler.