What Is The Document Object Model (DOM)?

Table of contents

• Definition
• Use Cases and Examples
• Summary

Definition

The Document Object Model (DOM) is a model or data structure formed based on the HTML [↗] elements present within a document. This structure is what browsers use to render a page. This structure is stored in memory making it possible to modify web pages in real time.

Use Cases and Examples

As mentioned in the above section, the DOM is an in-memory version of a web page. Relations are also drawn based on this structure. This structure and its relationships are stored as a Javascript Object [↗]. For example, the CSS [↗] that affects a particular HTML element can be accessed as a DOM object.

The Javascript code below shows how to target a particular HTML element and make modifications to it on the fly by accessing the DOM object.

✅ Wrap📋
01: <span id="target-element"> Some text here</span>
02: <script>
03: var element = document.getElementById('target-element')
04: console.log("DOM element:", element)
05: element.style.color = 'red'
06: </script>

The code above accessed the DOM object of the span element using the id as an identifier, then modified the CSS for the text within the tag. Thus changing it to the color red.

Summary

The DOM is nothing more than the frontend structure of a website in memory. Whenever you experience some form of interactivity on a website it's mostly because of the ability to modify the DOM in real-time. This also forms the basis of Single Page Applications (SPA) [↗]

Here is another article you might like 😊 What Is Unit Testing?