DEV Community

loading...

Explain DOM Like I'm Five

stefanhk31 profile image Stefan ・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!

Discussion (4)

pic
Editor guide
Collapse
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.

Collapse
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.

Collapse
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.

Collapse
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.