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 ke... [Read Full]
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.

code of conduct - report abuse