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 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.
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.
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.
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:
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.
Furthermore, If each object then implements the Node interface, then they get even more properties and methods.
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
Top comments (0)