DEV Community

Hodeem
Hodeem

Posted on • Updated on

What on earth is the DOM?

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

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

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

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

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

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

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

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 for more content like this.

If you liked this article, then please support me

Sources

Document Object Model - MDN

Introduction to the DOM - MDN

Document - MDN

What is an Application Programming Interface?

Interfaces

EventTarget Interface

Top comments (0)