DEV Community

Explain DOM Like I'm Five

Stefan on September 28, 2018

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