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.
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)
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.
dev.to/ycmjason/building-a-simple-...
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:
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.
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.
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.
Yes. I think that needs to be corrected.
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/
Thanks for sharing this!
props and state in ReactJs cool thing that do your todolist fast and cool
Thanks for helpful article.
You’re welcome!
Thanks for sharing ,seems takeaway of college lessons were correct.
Can't thank you enough. I ve been learning JavaScript for a while and this was really helpful .