Explain DOM Like I'm Five

github logo ・1 min read

I know that DOM stands for "Document Object Model", and it has something to do with transferring code to a browser....but that's about it.

I keep encountering it as I'm learning React, but I have yet to find a nice, concise description of what it is and what it does. Anyone have any good articles to link to for this? Or a short, snappy description that will help me understand its importance?

Thanks!

twitter logo DISCUSS (4)
markdown guide
 

The DOM is a changeable model of the HTML elements. You see, the a web page could be directly rendered like this: HTML string -> pixels. However, this would make it hard to introduce dynamic behavior. (Lots of string search/replace in the HTML string.) So instead, the browser first parses the HTML into an object: HTML -> DOM. When the DOM changes, then the browser re-renders it. DOM -> pixels. The DOM can be changed by user interaction (for example, typing in a text input automatically updates the value attribute) or Javascript.

So it is basically a more convenient way to modify a displayed web page than directly changing the HTML string.

 

There's a ton of technicalities here, but when I was on your shoes (learning jQuery instead), I just swept DOM under the rug as a fancy way of saying "how HTML documents are structured". That way, phrases like traversing the DOM or fetching from the DOM made sense β€” my JavaScript code is doing some fancy stuff with HTML.

 

The DOM is the in-memory representation of the current HTML that would be used to construct the page the browser is currently displaying.

 

Right click on something in a web page, and choose "Inspect Element". You might have to turn on developer mode to see it.

⬆ That's the DOM.

Classic DEV Post from Jul 2

How to refill someone’s β€œcup?”

Sometimes we rely so much on our friends and coworkers that we often forget to ma...

Stefan profile image
Web developer, historian, outdoor enthusiast, cat lover. Blending the soft skills of my humanities background with the hard skills of programming.