HTML & CSS
/Advanced
DOM & CSSOM
Definition
The Document Object Model (DOM) and CSS Object Model (CSSOM) are the two internal tree structures the browser builds to understand the HTML and CSS before it can paint the screen.
Explain Like I'm New
When a browser downloads your `index.html` file, it doesn't see a website. It sees a giant string of text. It parses that text into a family tree of objects (The DOM). Then it downloads your `styles.css` and builds a matching family tree of styles (The CSSOM). Only when BOTH trees are fully built can the browser figure out what the website is supposed to look like.
Real World Example
When you write `document.getElementById('btn')` in JavaScript, you are not searching the HTML file. You are searching the DOM tree that the browser built in its memory.
Common Use Cases
- •Understanding browser performance bottlenecks
Interactive Example
Interview Questions
basic
- What does DOM stand for?
intermediate
- Can the browser paint the screen if the DOM is finished but the CSSOM is still building?