DOM Vs View Source – Some definitions

View Source just shows  the HTML that makes up that page. It is the exact HTML that you wrote.

But the HTML you write is parsed by the browser and turned into the DOM.

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

The source is the raw HTML that is unadulterated by any client-side scripts. It is the direct response of the HTTP request to the server. The DOM, on the other hand, is the same HTML structure that has been modified by JavaScript.

Source Code reads the page’s HTML as if you opened it in a text editor. The source code reflects your HTML structure before any JavaScript is loaded.

The page source is the result of the GET request by the browser sans headers. If you want to view the updated content after scripts and so forth, you'll have to use a tool like Firebug or the Web Development toolbar.