DEV Community


Posted on

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?


Top comments (4)

kspeakman profile image
Kasey Speakman • Edited

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.

alchermd profile image
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.

nektro profile image
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.

notriddle profile image
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.