What on earth is the DOM?
Tags: webdev, javascript, productivity, beginners
Published: 2022-01-11 01:54:23

## Why am I writing about this?

Recently, I decided to get a concrete understanding of what the Document Object Model (DOM) is to better understand what React is doing behind the scenes.

The definitions for the DOM were all over the place. It was described as a JavaScript object, an architecture, a data representation and an Application Programming Interface (API) among other things. 

And then along came the "DOM API".

So you're telling me that there is an API API? 

At this point I was closer to giving up than Dominic Torreto is to family.

Now that I think I've clarified this fuzzy idea of "The DOM" I'd like to make it easier for other frustrated devs to understand.

## What caused the confusion?

The phrase "The DOM" is used to represent more than one concept. 

It's used when referring to the DOM API, the DOM Tree and the DOM Interfaces, among other things.

![The "DOM" is used to refer to the DOM API, the DOM Tree and the DOM Interfaces](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom17.svg)

The next term which is also used to represent more than one concept in DOM literature is the term "API". 

It's used to refer to both the DOM API and the DOM Interfaces. 

So let's recap what we've discussed so far. In web dev literature about the DOM, the phrase "The DOM" is used when talking about:
- The DOM API
- The DOM Tree, and
- The DOM Interfaces

And the term API is used to represent both:
- The DOM API, and
- The DOM Interfaces

## Let's break down "The DOM"

### The DOM API

At a high level, an API is like a "middle-man" between two entities. The DOM API, a Web API, is the middle-man between scripts and web pages. 

As developers we can use scripting languages, such as JavaScript, to change the structure, style and other properties of a web page by interacting with the DOM API.

![A flowchart showing the relationship between the script, the DOM and the Document Object](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom19.svg)

### The DOM Tree

The DOM Tree shows the structural relationship between the entities that make up the web page (Document Object). The tree is comprised of nodes, and each node contains objects.

If you're new to web development, don't be alarmed. Trees grow upside down on this side of town, so the root of this tree is the `HTML` node.

![A barebones DOM Tree showing the relationships between the nodes](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom11.svg)

### The DOM Interfaces

An interface is basically a contract or a set of rules. Any entity that "signs" this contract must have certain attributes and behave a certain way.

These attributes are called properties and the behaviours are called methods.

The interface doesn't specify how these properties and behaviours must be implemented. They just outline that these characteristics must be available as described by the contract.

For example, a `car` interface may specify that for something to be called a `car` it must have four tires and a steering wheel. 
So if any car manufacturer wants to produce a `car`, they must **implement**, or follow the rules of, the `car` interface.

Some common DOM interfaces are the `EventTarget` interface, the `Node` interface and the `Element` interface.

![Examples of DOM Interfaces](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom13.svg)

## Let's bring it all together

If I had to show the relationship between the DOM API, the DOM Tree and the DOM interfaces in one picture, here's how I would do it:

![The relationship between the DOM API, DOM Tree and the DOM interfaces](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom18.svg)

We mentioned earlier that the **DOM Tree** consists of nodes, and each node has an object. These objects implement different **DOM interfaces** which give them added properties and functionality.

For example, if each object in the DOM Tree above implements the `EventTarget` interface, then they inherit the properties and methods specified by this interface.

Examples of methods from this interface include the `addEventListener()` method, the `removeEventListener()` method and the `dispatchEvent()` method.

![The previous DOM Tree with each node being surrounded by a red circle](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom15.svg)

Furthermore, If each object then implements the `Node` interface, then they get even more properties and methods.

![The previous DOM Tree with each node being surrounded by an additional orange circle](https://hodeempublicimages.s3.us-east-2.amazonaws.com/dom14.svg)

This process goes on and on, but hopefully you get the idea now.

As developers, we interact with these properties and methods made available to us to make changes to the web page.

## Conclusion

The **DOM API** is an intermediary between scripts and web pages, and is used by scripts to manipulate the structure, style and content of web pages.

The **DOM API** consists of the **DOM Tree** which shows the relationship between the entities in the web page. 

The **DOM Tree** is comprised of nodes which contain objects that implement **DOM interfaces**.

The **DOM interfaces**, once implemented, give the objects added properties and methods.

We as developers interact with these properties and methods to make the changes to the web page (document object) that we'd like to see.

If you found this blog post helpful, then follow me on [Twitter](https://twitter.com/HMCodes) for more content like this.

If you liked this article, then please [support me] (https://www.buymeacoffee.com/hmcodes)

## Sources

[Document Object Model - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)

[Introduction to the DOM - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

[Document - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document)

[What is an Application Programming Interface?](https://www.ibm.com/cloud/learn/api)

[Interfaces](https://www.cs.utah.edu/~germain/PPS/Topics/interfaces.html)

[EventTarget Interface](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)