When I first learned about the DOM I was confused about how it was referred to as a 'thing' that could be accessed (false) and a representation of things (true). So, I thought I'd share this distinction.
The DOM is a way of representing a HTML document as a collection of objects. This collection is organized into a tree (nodes) based on how the HTML elements were nested. Everything is a node in the DOM. Each node contains, as properties, it's parent, siblings, and children nodes (among other properties).
It is important to note that the DOM is language agnostic. That is, it is a convention, with which any programming language can generate a tree of nodes that represents some mark up. Most commonly this is done with Javascript.
When the HTML is parsed it creates a global object we refer to as the window (AKA context) for javascript that lives in the broswer. By default all other JS objects will delegate to the window as their prototype. You could say that all other objects extend this global object.
Commonly, when working with the DOM we will actually be accessing the document object which lives in the browser and contains the HTML.
In JS it would look something like:
// our page content
var body = { children: [h1, articl, div] };
// meta information and links
var head = { children: [link, script] };
// contains the html
var im_like_the_html = { children: [head, body] };
// contains the html and a bunch of methods
var im_like_the_document = { children: [html] };
// global object
var im_like_the_window = { children: [document] };Of course each object would have many more methods and many more attributes but you get the idea. The document is really just some HTML parsed into a series of objects that you can use JS (and libraries like jQuery) to perform operations on.
https://www.kirupa.com/html5/traversing_the_dom.htm
https://dom.spec.whatwg.org/