December 7, 2021

What is the DOM?

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.

In web dev, we have three things: HTML, CSS, and JavaScript. These are three different languages but they need to work together to make things happen.

Without CSS your webpage will look like a word document, and without JavaScript it might as well be a document you printed out of a printer.

So what exactly does JavaScript do? A number of different things. For one, it can change or add new HTML. For example, when you click a "load more" button, more HTML can be displayed on your page without needing to refresh it.

Another important thing you can do is respond to "user events." For example, when you click on a button, you can make different things happen around your page. This can be something like submitting a form or sending a message, and it's all handled with JavaScript.

So how do we change our HTML with Javascript? With the DOM.

All your HTML might look something like the left side of the image above.

The DOM is just the exact same HTML, but it’s represented as a JavaScript object.

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.

DOM methods

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").

DOM sub objects

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.

DOM properties

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.

Long story short, one HTML file equates to one DOM or "document object" in JavaScript. If you change the DOM, your HTML updates automatically. We make these changes using the methods, properties, and sub objects on the DOM.

Lastly, knowing query selector, adding event listeners, and updating style properties will get us a long way, especially when we combine these with other features of JavaScript, such as writing loops and sending http requests.