What is the JavaScript DOM? (Document Object Model)

4 min readMar 14, 2022

As you dive deep into the world of web engineering, you might’ve come across the term DOM. The JavaScript DOM is one of the most important JavaScript fundamentals to learn before progressing to libraries such as React, Angular or Vue. But what is it exactly?

In this blog, we’ll cover some of the theoretical concepts behind the DOM.

I can assure you that the JS DOM will no longer be a mystery after reading this…

What is the DOM?

DOM stands for Document Object Model, it is a programming interface for web documents, this interface represents the page in a tree-like data structure. We can tap into this interface to change the document structure, style and content.

Trees:

Understanding the tree data structure is one of the core pre-requisites to truly understanding the DOM.

The DOM is a tree like data-structure which consists of nodes, each with some value and pointer to other nodes. A tree in computing refers to a set of nodes, each with a value and/or pointers to child nodes, which recursively form subtrees. The first node in the diagram above, “window, ” is referred to as the root node. Whilst the nodes at the bottom are often referred to as the leaf nodes. We can use a scripting language like JavaScript to modify the DOM and alter the representation of the web page e.g. content, style and structure.

Trees come up a lot in computer science. In addition to representing recursive structures such as HTML documents or programs, they are often used to maintain sorted sets of data because elements can usually be found or inserted more efficiently in a tree than in a flat array.

Typically trees can have different types of nodes. This is especially true for the DOM. Nodes for elements, which represent HTML tags, determine the structure of the document. These can have child nodes. An example of such a node is document.body. Some of these children can be leaf nodes, such as pieces of text or comment nodes.

Each DOM node object has a nodeType property, which contains a code (number) that identifies the type of node. Elements have code 1, which is also defined as the constant property Node.ELEMENT_NODE. Text nodes, representing a section of text in the document, get code 3 (Node.TEXT_NODE). Comments have code 8 (Node.COMMENT_NODE).

DOM Theory

Let’s examine the following basic client-server request scenario:

When a user tries to access https://google.com.
The client tries to resolve the domain name to an IP address by doing a DNS query.
Once/If it gets a IP address, the client makes the request to the machine at the provided IP.
The server will then return a simple HTML document.

The document returned is a written in a markup language, how does the browser know how to style and format the document as intended? This is where we make use of the DOM.

Imagine if the server returns the following HTML document to the client:

<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title> 
    </head>
    <body>
        <section class="top">
            <h1>Hello world!</h1>
        </section>
    </body>
</html>

The browser won’t know how to render the different elements and enable user interactions to those elements. Hence HTML documents are represented in a tree like structure via the DOM interface. We can use this to create, change or remove elements from the DOM hence making our page more dynamic via events.

Each node in Document Object Model can be an HTML element, HTML attribute, plain texts, comments, new line characters and much more. As we saw in the diagram above:

DOM tree starts from document node.
All HTML elements have their separate nodes known as element nodes.
Any text or tab character on a single line forms one text node. new line character is also a text node.
HTML attribute is also a node knows as attribute node.

Functionality provided by the DOM interface:

Ability to create, read, update or delete content from an HTML element.
Enables us to dynamically inject elements into our HTML (create HTML elements).
Delete HTML elements (or DOM nodes).
Change CSS style of an HTML elements or their content.
Respond to user interaction on HTML elements.

Conclusion

JavaScript programs may inspect and interfere with the document that the browser is displaying through a data structure called the DOM. This data structure represents the browser’s model of the document, and a JavaScript program can modify it to change the visible document.

The DOM is organised like a tree, in which elements are arranged hierarchically according to the structure of the document. The objects representing elements have properties such as parentNode and childNodes, which can be used to navigate through this tree.

The way a document is displayed can be influenced by styling, both by attaching styles to nodes directly and defining rules that match certain nodes. There are many different style properties, such as color or display. JavaScript code can manipulate an element’s style directly through its style property.

DOM manipulation is tough. There are lots of methods and techniques you need to master and it is not obvious which methods are best for each scenario.

Further resources:

WDS Dom Manipulation Exercises: https://www.youtube.com/watch?v=y17RuWkWdn8