DEV Community

Cover image for What exactly is the DOM?!

What exactly is the DOM?!

Kara Luton on March 04, 2019

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