The Document Object Model (DOM) is an object-oriented representation of the web page, representing the document as nodes and objects (HTML tags), which can be modified with a scripting language.

DOM is a programming API for HTML and XML documents.

The DOM is created when the webpage loads inside the browsers, HTML you write is parsed by the browser and turned into the DOM.

If you View Source the web page, the content may and most certainly will be different from DOM’s content. Programming languages, like Javascript, connect to the page and can dynamically change the content of the DOM.

If you open Dev Tools in any browser, you can see a live representation of the DOM and in most simple cases, the visual representation of the DOM will be just like your simple HTML, but remember that JavaScript can manipulate the DOM (dynamically adding content to your web page through AJAX calls).

So, if you are using Ajax to get content from elsewhere, the DOM is going to be very different than your original HTML, similar happens with client side templating.