What is the DOM?

As a web developer, when working with JavaScript, the most important API with which you work all the time is the DOM - the Document Object Model.

But what exactly is the DOM?

It's not your HTML code, even though that's a common misconception. Instead, the correct definition is, that it's an API that represents the loaded document (i.e. the website) with a logical tree. As this is also kind of abstract, I like to refer to the DOM as the "bridge" between your JavaScript and HTML code.

When working with browser-side JavaScript, most of your code deals with some kind of user interaction or the reaction to an interaction.

You might be listening to clicks, opening modals, showing error messages or sending AJAX Http requests. These would all be example operations that you perform with browser-side JavaScript.

For many actions, you actually use the DOM API in order to complete them. For example, if you want to show a modal overlay (e.g. an error alert overlay), you would do that with help of the DOM. The (highly simplified) code could look something like this:

const errorModalEl = document.createElement('div');
errorModalEl.innerHTML = '<p>An error occurred!</p>';

const bodyEl = document.body;
bodyEl.appendChild(errorModalEl);

document.createElement(), errorModalEl.innerHTML, document.body and bodyEl.appendChild() are all example snippets that use the DOM API.

Creating new elements, setting the content of elements, getting access to existing elements and adding created elements to the visible page are all common DOM API operations. Without the DOM API, you would not be able to listen to events or edit the appearence of the loaded web page with JavaScript.

And that's why I refer to "the DOM" (or, better, "the DOM API") as the bridge between JavaScript and HTML. You can use it in JavaScript to manipulate the HTML content, after the page was loaded.

Though, you don't actually manipulate the HTML code.

HTML (i.e. HyperText Markup Language) is the language you have to use to define the content and structure of your website.

HTML code is either hard-coded by you, the developer, or generated dynamically (based on your rules of course) on the web server. Either way, it's served to the browser upon an incoming request and the browser then parses the HTML code to understand how the web page should be rendered and displayed.

Parsing means that the browser analyzes the HTML code and translates it to instructions that are then executed by the browser. Instructions to display a title or some regular text. Instructions regarding how certain elements should look or whether an image should be loaded and displayed.

The browser creates an internal data structure that represents the HTML code logically. It creates a "logical tree structure" where the nested HTML elements are translated into branches with nodes in that tree.

Generally, you can think of the HTML elements as "node objects" in that tree structure which then may contain various properties that describe them (e.g. the attributes that were assigned to an HTML element - those are stored as properties of a node). Nodes may also contain other, nested nodes, just as HTML elements can contain other, nested HTML elements.

For example, this HTML snippet:

<p>
  Learn more about the <a href="/some-tut">DOM</a>
</p>

would be translated into something like this by the browser:

const document = { 
  tagName: 'P', 
  childNodes: [
    { textContent: 'Learn more about the DOM' },
    { 
      tagName: 'A', 
      href: '/some-tut',
      textContent: 'DOM'
    }
  ]
};

This is of course highly simplified - and it's JavaScript, the browser does not use JavaScript internally. But you get the idea.

The DOM API provides programmatic access to this tree structure. Internally, in JavaScript, it's represented as a JavaScript object with tons of properties and methods.

Nodes are simply nested objectes inside the "main DOM object" - to which you get access via the globally availale document variable. This variable grants access to this DOM object which in turn contains all these (nested) properties and methods.

The fact that we have methods is important by the way. The DOM API is not just about representing the loaded web page but instead also about manipulating it. As shown in the code snippet earlier in this article, the DOM API exposes methods for creating, editing and reading elements (it also offers methods for deleting).

Therefore, it's the DOM API which you must use if you want to interact with the loaded web page and its content in any way. It's the DOM API (and therefore, in the end, browser-side JavaScript) which you need to work with, if you want to build interactive, browser-based user interfaces!

And that's why I like to refer to the DOM API as a "bridge".