Greetings, friends! Today, I’ll discuss what the DOM (Document Object Model) is all about.
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.
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 ✌