THE DOM, THE DOM, THE DOM, What exactly is that?

I wrote HTML, CSS and Javascript codes up to 3 years ago without understanding the exact meaning of the DOM, in fact, I used to think my HTML code was the DOM, even though I made constant use of it. Weird right?

SO WHAT EXACTLY IS THE DOM?

The DOM stands for the Document Object Model.

The MDN Web Docs defines the DOM as "a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page."

Simply put, the DOM is an API to web pages. This is why programs like javascript can manipulate and change it.

You must have also heard some people refer to the DOM as a Tree.

From the image above, you can see the tree-like structure, people refer to it as a tree because the DOM starts with a single parent item that branches into children items and even more children items.

Note that the DOM is not;

the same as your HTML source code even though it is created from
there: this can be verified from an instance when you mistakenly leave
out a required element. You'll notice it in the DOM even though
you've left it out of your HTML. also after modifying the DOM with
Javascript, you'd also notice that the DOM is different from your HTML
source code.
the same as what you see in the Dev tools: If you're familiar with the
dev tools, you'd notice that it adds additional information that is
not in the Dom such as Pseudo-elements created using the ::before and
::after selectors, but these are not in the DOM.

In part 2 of this article, I will discuss how you modify the DOM with Javascript.

Summary:

The DOM is an API for HTML and XML documents. It represents the page so
that programs can change the document structure, style, and content.
The DOM is not the same as your HTM source code even though it is
generated from it.
The DOM is not the same as what you see in the Dev tools because the
dev tools contains extra information like the pseudo-elements (::before
and ::before)

Super thanks for reading my article about the DOM. Kindly follow me on twitter @tech_bella for interesting Tech tweets. You can ask questions or make comments in the comment section below.