Document Object Model (DOM), which is basically web dev lingo for “how web pages work behind the scenes,” is something every web developer should have in their toolkit. It’s like the secret sauce that powers modern web development.

But why DOM? I recently stumbled upon a video of how browsers work and then dwelled into some articles and this is my under standing of the “why?”

Every browser works with a ** browser engine**,it is a core component of a web browser responsible for rendering web content, including HTML, CSS, and JavaScript, into a visual representation that users can interact with.

The “Document”: This term refers to a web page loaded into a web browser. It represents the structured hierarchy of the web page’s content, including elements such as headings, paragraphs, images, links, forms, and more. The DOM document is essentially an in-memory representation of the web page’s structure, created by the browser’s rendering engine when the page is loaded.

Now comes the interesting part of how the browser engine transforms the document into a node tree, which we know as the DOM for painting.

Well after downloading the document it is converted to raw data,yes, 0s and 1s.And this raw bytes of data is converted into characters.This conversion is done based on the character encoding of the HTML file.

These characters are further parsed into something called tokens.Alike any other programming language token can be defined as the smallest individual element of that programming language that is meaningful.Here token refers to the tags in HTML namely body,h1,h2,p,span etc.

Once tokenization is complete, the next step is to structure these tokens. This is where objects come into play.An object is created out of these tokens,these object contains a lot of information about each entities, including tag start, tag end, attributes, data/value, and more.

Now, we have a “Document” and “Objects”, but it’s still unstructured because there’s no relationship between these objects. After tokenization, these tokens are transformed into nodes. Each node will have a relationship with another, featuring parent, child, and sibling nodes. These node-to-node relationships form a familiar tree-like structure. This process is known as modeling the object tree.Now a node tree model is ready from the HTML document and ready to be painted.

To recap, the name “Document Object Model” reflects its purpose and function. It serves as a structured model for web page content, represented as a collection of objects. The name “DOM” emerged from the fusion of “Document” (the web page), “Object” (representing elements), and “Model” (the structured representation).

I hope this helps, and please feel free to provide any feedback or ask if you have any specific questions or concerns.