The Document Object Model is an interface to web pages. In other words, it is an API to the page, allowing programs and languages (like JavaScript) to read and manipulate the page’s content, structure and styles. It is effectively an object-based representation of the source HTML document. It has some differences, but it is essentially an attempt to convert the structure and content of our HTML document into an object model that can be used by various languages.

The DOM gives us infinite possibilities to create apps that update the content of the page without needing a refresh, you can create apps that are customisable by the user and you can allow the user to drag, move and delete elements on the fly,

The HTML of the page may differ to the DOM for a number of reasons. The DOM has to be a valid representation of your HTML which means that any errors in the HTML code (e.g. a missing closing tag or including text below the closing </body> tag, will be corrected by the DOM and modified in small ways. Furthermore, we may also want to dynamically change the layout and content of the page on the fly (via JavaScript) which also modifies the DOM which will be different to your HTML code.

The DOM is kind of the same of what we see in the elements inspector within DevTools. The DOM should exclude CSS, but pseudo-elements are included within the DevTools and for this reason, the DevTools are not 100% the same as the DOM.