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!
Top comments (4)
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 thevalueattribute) 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.