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

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.


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.


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


thanks to : @ycmjason


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


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.


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 %}

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


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


Not that "D*oo*m"

But both are hard to tame.

It's funny but the Dom is bad designed, it's not standard and it allows to write bad code.

For example this one:

   <tr><td>Cell 1</td><td>Cell 2</td></tr>

Some browsers convert into:

        <tr><td>Cell 1</td><td>Cell 2</td></tr>

So it is really easy to mess it up. For example, if we work relatively: "select the first child of the first child of the table" (we want to select the first cell), we are selecting a wrong element (we are instead selecting the whole row).


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.


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


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


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/


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


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

code of conduct - report abuse