Traversing The DOM. Understanding HTML family Tree (part one)

Holla. You know how families trees are with parents, siblings, grandparents and the likes, well that is basically how the HTML DOM is structured. Html elements do have parents and could have children and also siblings (lol).

Okay to make this clearer, let's look at this weird family tree (Hmmm it's more like this Russian Matryoshka dolls, with smaller ones in bigger ones than a family tree).

From the image above, we see a hierarchy with the grandparents wrapping the parents and the parents having children too. Let's take a look at some HTML family tree.

I hope you already see the hierarchy (family tree) from the HTML code snippets id's and texts (Look at it again I promise you will).

So let's move on to Traversing the DOM. Traversing the DOM means moving back and forth or sideways through the DOM. And it is mostly done when we intend to style or include functionality to DOM elements using CSS or a Script. A large part of traversing the DOM is knowing your starting point. You could start from a grandparent and traverse to its grandchild and vice versa. You could start with a child and move to its sibling.

So how do we find our starting points to get this traversing going?. Well, we make use of Selectors. Did you notice the id's on the Html Family tree above?. Well, those are a type of selectors which you can read up on here.

Let's move through the DOM using CSS by making a toggle component.

Below is the Html code.

Notice that the Label element is the parent element of two Span elements and an Input element. Let's pick the Label as our starting point and then try to get to its children.

Parent to Children: In CSS, we can use the child combinator (>) to target any child of a parent element. For example

.parent > .firstChild {
  height: 50px;
  line-height: 50px;
  padding: 4px;
}

The code above targets .firstChild (the first span in this case) from .parent (which is the Label). We could have done the same for any other child of the Label too.

Siblings: In CSS, you can target siblings after your starting point using the adjacent sibling selector (+) or general sibling selector (~). While the adjacent sibling selector is used to target an element that is directly after your starting point, the general sibling selector selects all elements that are siblings of your starting point. For example,

#toggler:checked + span {
height: 200px;

}

targets the span (the third child in this case) because it is the direct sibling of #toggler (the Input element in this case).

#toggler:checked ~ span {
// this would target all the span siblings of #toggler
}

Child to Parent: In CSS, there is currently no way for a child element to target its parent or sibling that comes before it (CSS has respect for elders I guess lol).

Well, this article was to let you see the hierarchical nature of Html elements but there is more to all this. You can really do much more powerful transverse using a script and I would be talking about that in part two of this article.

Below is the complete code for the toggle component,

and here is the link to CSS Selector Reference

Please if you have any questions, comments or corrections, do not hesitate to post them below or chat me up on @naija-made-dev

See you in the next article...