Table of contents
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
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.
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?"