DEV Community

loading...
Cover image for What exactly is the DOM?!

What exactly is the DOM?!

karaluton profile image Kara Luton ・2 min read

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.

Discussion (20)

pic
Editor guide
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 Author

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

Collapse
tiffany profile image
Tiffany White

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
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 Author

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 Author

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
jorgecc profile image
Jorge Castro • Edited

Not that "D*oo*m"
https://static1.squarespace.com/static/544a89a9e4b03e16957adb96/58cda1b420099e8bad6e497e/5907e4305016e17b11ba062b/1493689395561/DrDoom-Print_8x10_sm.png?

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:

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

Some browsers convert into:

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

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

Collapse
karaluton profile image
Kara Luton Author • 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
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 Author

Thanks for sharing this!

Collapse
o13gg profile image
Oleg

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

Collapse
iamsbharti profile image
Iamsbharti

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

Collapse
alifarag_90 profile image
AliFarag

Thanks for helpful article.

Collapse
karaluton profile image
Kara Luton Author

You’re welcome!

Collapse
devparkk profile image
Dev Prakash

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