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.

Source – Wikipedia

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 ✌

Published by Thisura Thenuka

I am a passionate software engineering student. But cricket is my first love ❤

One thought on “Understanding the DOM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: