# DOM
### Document Object Model
---
## What is It
*MDN Definition: The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.*
[ Event Target < NODE < Document ]
---
## How is the structure beneficial
**Humans and Heirarchy**
From a pshycological POV. Humans built the internet. So by default the structure is relative to how we process information. We also see that computers process and easily access information. *We know this hierarchy in Javascript as an object*
---
## HTML Structure
**This is not an object. Notice anything about the structure????**
```
<body>
<div class="header" >
<h1><b>Bootstrap Crypto Card</b></h1>
</div>
<div class="sub-header" >
<i>Earn Crypto on Every Purchase. Everywhere</i>
</div>
<p class="sub-header-content justify-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="list-group list-group-horizontal lgroup">
<li class="list-group-item"><img src="./images/bricks.svg" alt="" width="30" height="24"> Blockchain Secured</li>
<li class="list-group-item"><img src="./images/wallet.svg" alt="" width="30" height="24"> DeFi Wallet Compatible</li>
<li class="list-group-item"><img src="./images/arrow.svg" alt="" width="30" height="24"> Easy Deposit</li>
</ul>
</body>
```
*JavaScript can not read this*
---
## Importance of the DOM
-The DOM represents an entire HTML document as a single object and is created when the when the broswer reads the HTML file
**WHERE DO JAVASCRIPT COME INTO PLAY?**
---
## Web Interaction
Javascript allows users to interact with the web in various ways.
Ex: Login, Logout, Validations, Security, API interaction.
**So how are arrays, loops, objects, & Functions fit into this picture?**
*BONUS: This includes classes, constructors*
---
### DOM and the JavaScript
The DOM links JavaScript to the source HTML code, which enables JavaScript to execute its functions on individual HTML elements. This in essense creates *Web Interaction*
----
**A look at the Window**
**Look at the MDN Docs JS of Common Events**
**Live Example**
{"metaMigratedAt":"2023-06-16T22:52:27.162Z","metaMigratedFrom":"Content","title":"DOM","breaks":true,"description":"MDN Definition: The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.","contributors":"[{\"id\":\"5e29e175-4809-4add-a41e-e8982dab52a9\",\"add\":3331,\"del\":993}]"}