DEV Community

Cover image for What exactly is the DOM?!
Kara Luton
Kara Luton

Posted on

What exactly is the DOM?!

The DOM. When I was first learning to code at my bootcamp I heard this word all the time but I never exactly knew what it meant. Was it the HTML that I write? Was it 'view source' that I accidentally sometimes clicked on when I meant to inspect elements? I never really understood. And to be totally honest, it took me a while to figure out exactly what it is.

According to W3C, the document object model (DOM) is an "application programming interface for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated".

Whaaaaat? In simple terms, the DOM is a representation of your HTML to the browser and allows you to manipulate the page.

Visual representation of the DOM tree

So why is it often referred to as a tree? This is because the DOM starts with a single parent item that branches out into children items. These children items can also branch out into their own smaller trees like what you see in the photo above.

I've read on a few sites that what you see in DevTools is the visual representation of the DOM, and while it's extremely close, it isn't exactly right. DevTools will include some additional information (like pseudo classes) that are not technically part of the DOM. If you're a visual person like myself, this is the closest portrayal of the DOM in our browser that we can see.

But hold up a second -- doesn't that mean the DOM is the same thing as the HTML we're writing? Nope.

Have you ever accidentally left out a required element and had the browser fix it for you? You'll see that element in the DOM even though you've left it out of your HTML. The DOM will also be different than your HTML if you're manipulating the DOM through JavaScript.

With JavaScript you can do things like edit the CSS of your page, add event listeners, change node attributes and much more. These are all changing the DOM from what you had originally written in your HTML.

To wrap it all up, while the DOM sounds like this super intimidating thing, it's actually how browsers determine what is rendered on our page and, through JavaScript, is how we can manipulate those elements that are rendered.


Thank you so much for reading my article about the DOM! Be sure to follow me on Twitter for lots of tweets about tech, and if I'm being honest, lots of tweets about dogs too. Feel free to comment below or tweet me with any questions you may have.

Top comments (19)

Collapse
 
ben profile image
Ben Halpern

Nice overview.

You'll hear about the "virtual DOM" with frontend libraries like React. React pioneered of keeping a copy of the DOM available to make changes to so it can make bulk changes to the page in order to not slow things down.

It's kind of like making batch database writes for performance reasons instead of a bunch of small ones.

Just dropping that tidbit because for a lot of folks that might be the first they hear of DOM.

Collapse
 
baso53 profile image
Sebastijan Grabar

Virtual DOM isn't just about rendering in batches. It's main use is to not (unnecessarily) render parts of the tree that don't receive new data, and to only render those that do.

Collapse
 
simo97 profile image
ADONIS SIMO

yeah sure ... here is an article about that and some Virtual DOM internals stuff.

dev.to/ycmjason/building-a-simple-...

thanks to : @ycmjason

Collapse
 
karaluton profile image
Kara Luton

Thanks so much! I’m not super familiar with React (it’s on my todo list) so I learned something new too :)

Collapse
 
tifflabs profile image
tiff

React team doesn't use "virtual DOM" anymore. Dan Abramov told me this in a DM when I tagged him in a React reconciliation post of mine. He said the team avoids the term and basically just state that React renders a tree of elements.

Collapse
 
m1guelpf profile image
Miguel Piedrafita

I turned this article into audio using Blogcast!

If you want, you can add this👆 player to your article by adding the following code to the top:

{% blogcast 328 %}
Collapse
 
karaluton profile image
Kara Luton • Edited

I believe that tbody is a required element when making a table which is why, if you’re missing it, some browsers will automatically insert it into the DOM. I do agree that it can make things super tricky sometimes especially when something like that is happening.

Collapse
 
jacksonelfers profile image
Jackson Elfers

After a while it becomes rather natural to manipulate the page with js. The DOM is nothing but an API granting access to the page through js. Reactjs takes advantage of the DOM to make pages purely through js which is radical. 😁

Collapse
 
karaluton profile image
Kara Luton

Oh, definitely! It’s a pretty cool thing.

Collapse
 
danieldogeanu profile image
Daniel Dogeanu

Just wanted to point out that DOM stands for Document Object Model, not "document object modifier". According to W3C.

Collapse
 
karaluton profile image
Kara Luton

Thank you! Got that fixed. Missed that one as I was looking it over.

Collapse
 
reflexgravity profile image
Joel D Souza

Yes. I think that needs to be corrected.

Collapse
 
mornir profile image
Jérôme Pott

Thank you for this introduction 😃

For people wanting to delve a bit deeper into the subject, I highly recommend reading this article: bitsofco.de/what-exactly-is-the-dom/

Collapse
 
karaluton profile image
Kara Luton

Thanks for sharing this!

Collapse
 
o13gg profile image
Oleg

props and state in ReactJs cool thing that do your todolist fast and cool

Collapse
 
alifarag_90 profile image
AliFarag

Thanks for helpful article.

Collapse
 
karaluton profile image
Kara Luton

You’re welcome!

Collapse
 
iamsbharti profile image
Iamsbharti

Thanks for sharing ,seems takeaway of college lessons were correct.

Collapse
 
devparkk profile image
Dev Prakash

Can't thank you enough. I ve been learning JavaScript for a while and this was really helpful .