A reader recently wrote in asking me what the DOM was. They said they've heard it mentioned and eluded to, but aren't sure they really understand it.
We can fix that.
But the HTML you write is parsed by the browser and turned into the DOM.
View Source just shows you the HTML that makes up that page. It's probably the exact HTML that you wrote.
It might look like different code if, for example, you work in template files in a backend language and don't look at the compiled HTML output very often. Or there is a "build process" that happens after you write your HTML and the code is put out to the live website. Perhaps that HTML is compressed or otherwise changed.
View Source is a little weird actually. The only people that would care to look at that code are developers and all the major browsers have built in developer tools now. It has probably out-lived its usefulness.
When you're looking at the panel in whatever DevTools you are using that shows you stuff that looks like HTML, that is a visual representation of the DOM! We made it!
Well, yeah, it does. It was created directly from your HTML remember. In most simple cases, the visual representation of the DOM will be just like your simple HTML.
But it's often not the same...
When is the DOM different than the HTML?
Here's one possibility: there are mistakes in your HTML and the browser has fixed them for you. Let's say you leave out the <body> element in your HTML. That's invalid, and thus risky because what a browser decides to do in that scenario may vary, but most browsers will just roll with it. They would rather try and fix it and show you a website than totally fail and show nothing. So in the DOM, the body will just be there. The browser will insert it for you. You'll be able to style it with CSS and find it with JavaScript, just like would if it was really there in the HTML.
Another situation where the DOM is different than the written HTML is the <table> element and the required <tbody> element. Most table markup out there doesn't bother with the <tbody>, but since it's required, it's always there in the DOM.
The most likely case though, is...
JavaScript can manipulate the DOM
Imagine you have an empty element like this in your HTML:
Then later in your HTML, there is a bit of JavaScript:
Even if you don't know JavaScript, you can reason that bit of code out. On the screen you'll see New Content! rather than nothing, because that empty div was filled with some, ahem, new content.
If you use DevTools to check out the visual representation of the DOM, you'll see:
Which is different than your original HTML or what you would see in View Source.
Ajax and Templating
Let's not go off the deep end here, but I bet you can imagine if you were to use Ajax to snag content from elsewhere and put it onto the page, the DOM is going to be very different than your original HTML. The same with loading in data of some sort and using client side templating.
Try going to Gmail and viewing source. It's just a bunch of scripts and data from the original page load. Barely recognizable compared to what you see on the screen.
JavaScript vs. the DOM
JavaScript is a language that the browser reads and does stuff with. But the DOM is where that stuff happens. In fact a lot of what you might think of as a "JavaScript Thing" is more accurately a "DOM API".
For instance, we can write JavaScript that watches for a mouseenter event on an element. But that "element" is really a DOM node. We attach that listener via a DOM property on that DOM node. When that event happens, it's the DOM node that emits that event.
Appologies if I worded any of that stuff incorrectly. But you get the point I hope. The DOM is the lifeblood here. It's where everything goes down in the browser. JavaScript is just the syntax, the language. It can be used totally outside the browser with no DOM API's at all (see Node.js).
This article isn't nearly nerdy and in-depth enough for me.
Well, the DOM stands for "Document Object Model" blah blah blah. I didn't want to (and am not qualified) to write that article. Here's some meaty ones:
W3C: What is the Document Object Model?
MDN: Introduction - Document Object Model
Wikipedia: Document Object Model
What is the DOM? is a post from CSS-Tricks