When you try to understand the DOM you get complicated explanations and diagrams.
Here's a simple explanation of what the DOM is.
We'll cover why the DOM exists, what it is in simple terms, and how you use it.
All your HTML might look something like the left side of the image above.
So the DOM is always exactly identical to the HTML on our page, as shown above in the right side of the image.
Things stay in sync; the browser takes care of this under the hood. What's important to remember is that the DOM and HTML are like the same document in two different languages, like English and Russian.
So we can talk about the DOM and we don't just mean this HTML above. We mean everything that's attached to this object, and the different ways we can interact with it.
These things attached to the object include methods, sub objects, and properties.
Methods are functions attached to the document object, which can do things like select a specific HTML element. For example, we can select the header on our page within the document object using document.querySelector("h1").
We also have sub objects, which are "pieces" of the larger object. For example, once we select a header using the querySelector, we get a single h1 HTML element, which is, itself, an object on the DOM. And this sub object has its own methods and properties too. And we can do something with it like an add an event listener to listen for a click on that header.
And finally, we have properties. Using that same header we selected, we can type .style.color and then set it equal to a string "red" to change the color. Style is a sub object and inside it we have properties for every type of CSS.
Those three things: querySelector, EventListener, and .style are what you're going to be using 70 to 80% of the time with the DOM, so if you can understand just those three things you're going to be in pretty good shape.