- **Epistemic status:** #budding The Document Object Model or DOM is an object representation of the [[HTML (HyperText Markup Language)]] elements of a webpage. It gives us an interface that interacts and manipulate the page, change the document structure, content, and styling. How this is generated is when a browser loads a web page, it first looks at the [[HTML (HyperText Markup Language)]]. The browser uses the [[HTML (HyperText Markup Language)]] as a blueprint or instructions on how to build the page (then it applies the [[Cascading Style Sheets (CSS)]] later). When the browser parses the instructions, it builds a model of how the model should look and work in [[JavaScript]]. This model contains every element in order of the page in a tree-like structure. Each DOM element being a tree node, containing all the same property keys as each other node. Some of these node properties are informational, while others are methods that we can use for interaction. The DOM, creating and propagating event objects, which hold information about the event type and target, up the tree. ![[Pasted image 20220426100308.png]] When the DOM is built and the webpage is loaded, developers get access to it in the form of the global [[JavaScript]] object document. The document contains the entire hierarchy of the page, each element (or DOM node), and it also contains dozens of built-in methods and properties. We can use these methods and properties to manipulate what we see on the screen. --- ## References - “Document Object Model - Wikipedia.” Accessed April 26, 2022. <https://en.wikipedia.org/wiki/Document_Object_Model>. - “Introduction to the DOM - Web APIs | MDN.” Accessed April 26, 2022. <https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction>.