Member-only story
As a web developer, you are certainly very familiar with manipulating the DOM (Document Object Model) using JavaScript to update pages dynamically, handle events, build components and more.
But have you ever wondered what exactly happens behind the scenes to turn plain HTML, CSS and JavaScript code into interactive DOM objects that allow scripting languages to do their magic?
In this article we’ll breach the inner workings of web browsers to understand the step-by-step process of constructing the DOM when a page loads — unlocking the mysteries within!
Building Up the Structure from Raw HTML
When a web browser requests an HTML page, the raw text-based document gets returned over the network. This markup contains DOM element nodes like <p>, <div>, <table> mixed with text content.
The browser begins parsing the HTML, turning angle bracket tags into matching node objects in a tree model that mirrors the document structure.
For example:
<body>
<div>
<p>Hello World!</p>
</div>
</body>
