Explain DOM Like I'm Five

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!

Comments

[Kasey Speakman]

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.

[John Alcher]

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.

[Meghan (she/her)]

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

[Michael "notriddle" Howell]

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.