Understanding the DOM

Greetings, friends! Today, I’ll discuss what the DOM (Document Object Model) is all about.

Motivation

I was interested in learning more about the DOM since I wanted to see how well I knew React. One of React’s most well-known features is its virtual DOM (VDOM). Prior to studying how the VDOM works, I wanted to understand how the real DOM works.

So I set out to learn React from the ground up so that I could explain it to others. That is the primary motivation for me to begin writing this article.

What is the DOM?

The DOM, according to MDN Web Docs, is a data representation of objects that make up the structure and content of a web document. The DOM is a programming interface that allows you to change the document’s styling, content, and structure.

When a web page is loaded into a browser, the DOM for that page is created by the browser.

Because the DOM is an object-oriented representation of the web page, it may be changed with scripting languages like as JavaScript, Python, and others.

Simply put, when we write,

const button = document.getElementById("myClass");
window.alert("Hi There");

document and the window of these lines of code come from the DOM.

DOM has been built using multiple APIs. For an example, there is a separate DOM API for SVG documents and separate DOM API for HTML.

The Document Object Model (DOM) is a tree-like representation. When we make a modification to the page, the DOM has no means of knowing exactly where the change was done. This is why, whenever we make a modification to our HTML page, we must always reload the browser.

There are numerous aspects of the DOM to investigate. If you’re interested, I strongly advise you to begin with the MDN Docs article.

---

Now that we have a basic understanding of how the DOM works, I’d like to go into React’s Virtual DOM in the following post. Until then, Stay Safe ✌