DEV Community: Troels Agergaard

Understanding the HTML DOM: Document Objects Model

Troels Agergaard — Thu, 20 Feb 2025 15:23:12 +0000

The Document Object Model (DOM) is a fundamental part of how web browsers interpret and manipulate HTML documents. By breaking the DOM into three main components, we can understand it as follows:

The Document is the HTML file that the browser loads. This document serves as the foundation from which all elements are identified and organized.

Here is an example of a simple HTML document:
The entire HTML structure makes up the document.

The Objects or HTML element in the document is represented as an object in the DOM. The browser converts HTML tags into a hierarchical structure of objects, which can be manipulated using JavaScript.

For example:
<h1> is an object.
<p> is an object.
<body> is an object that contains other objects.

We can access and modify these objects using JavaScript:
This code changes the content of the <h1> element.

The Model (Structure and Hierarchy) organizes objects into a tree structure, where some elements are parents, and others are children and together, they form the model.

Example of the DOM structure for the previous HTML document:
In this model, <html> is the root, <head> and <body> are child nodes, and each element within them follows the hierarchy.

A low-level entry point to get started contributing to open source.

Troels Agergaard — Mon, 22 Feb 2021 22:35:58 +0000

Hello,

Have you ever thought that open source is only for a developer elite like Max Stoiber? And that contributing requires hours of investment?

Then you are right! 😆
Fortunately, not everyone needs to reach over twenty thousand GitHub stars on their next open-source project, like react-boilerplate did, or contribute bug fixes and improvements to complex projects like React.

During Hacktoberfest 2020, I used Chrome’s Lighthouse to identify and fix small accessibility issues—such as missing alt="Happy hacking" attributes on images or missing rel="noreferrer" on external links. These are minor problems that impact accessibility and security.

These contributions weren’t groundbreaking performance bug fixes for a framework used by millions, nor were they particularly complex or time-consuming. But they were still important and added value to the projects—something the maintainers genuinely appreciated.

If you’ve never contributed to an open-source project, this approach can be a great way to get started, without years of experience or hours of commitment.

Happy hacking!
Troels Agergaard

How to avoid overflow behavior on translated elements

Troels Agergaard — Sun, 21 Feb 2021 20:22:59 +0000

Have you ever experienced that a CSS rule behaved differently than you would have expected it to?

Last week one of my students had such a mind-twisting CSS rule! This rule translated an element, but the rendered element behaved differently than expected. It was overflowing the parent.

He asked me why the element behaved like this after being translated and told me that the remaining space was defined to be distributed between the two elements by setting justify-content: space-between; which worked perfectly fine before the translation.

First, let's look at the transform property I said.
By using this property, elements can be translated: rotated, scaled, and skewed. But this effect will change the visual formatting model, which means that the position and shape of the affected content change. In other words, this affects the visual rendering of elements – but without disrupting the normal document flow.

Let's have a look at this overflowing behavior in your project, and see if we can help get your heads around what this behavior is caused by, and then understand how to solve it.

As mention earlier, everything worked as expected before translation. Rendering result before translated:

But when the elements are translated, they begin to overflow:

The transformation origin(Illustrated by the orange circles) is the point around which a transformation is applied. By default, the origin is center, but we can use the transform-origin CSS property to change the position of the origin.

When trying to skew the justified elements, they are forced to overflow because i.e. the visual rendering of the translated element does not affect the normal document flow.

Let us fix this by adjusting the origin of the left element to the upper left corner instead. For the element to the right, we change the position to the bottom right corner.

This will cause the element to use these new points of the elements as the origins and therefore rotation points:

And there you have it, a translated element without any overflow!

Happy Hacking
Troels Agergaard