The DOM. When I was first learning to code at my bootcamp I heard this word all the time but I never exactly knew what it meant. Was it the HTML that I write? Was it ‘view source’ that I accidentally sometimes clicked on when I meant to inspect elements? I never really understood. And to be totally honest, it took me a while to figure out exactly what it is.
According to W3C, the document object model (DOM) is an “application programming interface for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated”.
Whaaaaat? In simple terms, the DOM is a representation of your HTML to the browser and allows you to manipulate the page.
So why is it often referred to as a tree? This is because the DOM starts with a single parent item that branches out into children items. These children items can also branch out into their own smaller trees like what you see in the photo above.
I’ve read on a few sites that what you see in DevTools is the visual representation of the DOM, and while it’s extremely close, it isn’t exactly right. DevTools will include some additional information (like pseudo classes) that are not technically part of the DOM. If you’re a visual person like myself, this is the closest portrayal of the DOM in our browser that we can see.
But hold up a second — doesn’t that mean the DOM is the same thing as the HTML we’re writing? Nope.