What is the DOM?
DOM stands for Document Object Model. Its a way of representing a structured document via objects. On the web, we have (primarily HTML) documents that make up our web pages. By representing a document through the DOM as a collection of objects, we're able to manipulate web pages beyond just a static rendering of a document. The web browsers handle the DOM implementation details, exposing a DOM API for scripting (JavaScript) and presentation (CSS) to interface with. DOM APIs allow developers to do various things to parts of a document such as adding, deleting, and moving nodes around.
Visualizing the DOM
All modern browsers have a tab in their dev tools that allows traversing the DOM tree.
Mozilla wrote a neat little tool called Tilt a few years ago that allowed developers to view a 3D layout of their pages based on the DOM.
It's important to note that what you see in these visualizations of the DOM is not quite literally the DOM, as Chris Coyier mentions in his own What is the DOM? post.
The term Critical Rendering Path is often used to describe how browsers process and combine the DOM, CSS and JavaScript into a construct they can render to the screen.
The DOM is a structured abstraction of a document.
Abstractions usually have trade-offs. In the case of the DOM as implemented today in modern web browsers, there is considerable debate going on. As we move into a web of apps instead of documents, the future of the DOM, how browsers utilize it to build their render tree, how libraries utilize it and how we build apps and UIs on top of it is in flux.
Stay tuned for upcoming trends and standards that change how web developers interact with the DOM and, subsequently, how sites and application UIs are build.
For some more history and more detail into how web browsers implement Plain Old DOM, dive into the following: