What Is the Document Object Model in Web Applications? | TaQtiQ
What Is the Document Object Model in Web Applications?
Emmanuel Learmount·
6 min read
A summary of what the DOM is, why it exists and how it works, a quick history of the DOM and a dive into how you can manipulate the DOM.
Listen to article0:00 / 0:00
What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
In simple terms, the DOM is an interactive, live map of a webpage that allows JavaScript to change text, styles or structure in real time.
The DOM turns raw HTML code into a tree of interactive objects that JavaScript can manipulate.
The DOM acts as a bridge between raw, static HTML and dynamic programming languages like JavaScript.
Why does the DOM exist? (a quick history of the DOM)
The DOM exists so that JavaScript can alter page structure, styles and update content without refreshing. Essentially, it allows web pages to be dynamic.
It wasn't always like this though.
From 1989 to 1995 the web existed completely without the DOM.
During this era, websites were purely static HTML documents without dynamic changes or interactive elements.
1995
In 1995, Netscape introduced JavaScript which included a basic set of object bindings like document.forms and document.images to allow scripts to interact with page elements. This became known as DOM level 0.
1996 - 1998
Between 1996 and 1998 Netscape and Microsoft fought over control of the web. Both companies introduced features to make web pages more interactive, but both built completely incompatible models:
Netscape 4 introduced the <layer> element and document.layers.
DOM Level 1 (1998): Defined the first official, platform-neutral specification for representing documents as a tree of nodes. It introduced core selection and node manipulation methods like getElementById, appendChild, and createElement.
DOM Level 2 (2000): Introduced crucial modern primitives, stylesheet manipulation, and the standardised event model (addEventListener and removeEventListener).
2006
Even with standards, browsers had bugs and inconsistencies. In 2006, jQuery was released, which hid those inconsistencies behind a universal wrapper.
2011 - Present
In 2011, browsers finally agreed to follow identical standards. Today, the DOM is considered to be a "living standard", meaning that it is updated continuously to support modern web apps and components.
How exactly does the DOM work?
How the browser builds the DOM
Step 1: Bytes to characters
When a web server responds to a request, the HTML file is sent across the network as raw binary data (a stream of 0s and 1s).
Byte Stream: The browser receives chunks of bytes over HTTP.
Character encoding: The browser looks at the HTTP response header Content-Type: text/html; charset=UTF-8 (or the <meta charset="UTF-8"> tag) to convert the bytes into characters (text strings like <html>, <body>, <p>)
The character stream is then fed into a tokeniser. The HTML specification defines a state machine that reads characters one by one to produce discrete structural tokens:
StartTag: e. g. StartTag: html, StartTag: body, StartTag: p
EndTag: e. g. EndTag: p, EndTag: body
Tag Attributes: e. g. class="container", id="main"
Plain Text Contents: e. g. "My Document".
Step 3: Tokens to Nodes
A tree construction algorithm processes the tokens as they are emitted from the tokeniser to create C++ object instances representing DOM nodes:
const containerDiv = document.getElementById("container");
// containerDiv is an HTMLDivElementconst profileDivs = document.getElementsByClassName("profile");
// profileDivs is an HTMLCollection containing an HTMLDivElementconst profileDivs2 = document.getElementsByTagName("div");
// profileDivs2 is an HTMLCollection containing both HTMLDivElements
You can also use CSS selectors to select elements. Two methods are available:
const el = document.querySelector("#main, #basic, #exclamation");
const special = document.querySelectorAll("p.warning, p.note");
Modifying content and attributes
Once a node has been selected, you can begin modifying its properties and attributes. The attributes that can be modified will be defined on the interface itself (e. g. HTMLTitleElement).
// Select the HTML <title> element directly by tag nameconst titleElement = document.querySelector('title');
// Update its content using the HTMLTitleElement `.text` property
titleElement.text = 'New Page Title';
// The same thing can actually be done with this shortcut:document.title = 'New Page Title';
Until you insert it into an active DOM tree, it remains invisible on the rendered page.
// Instantiates an HTMLDivElement node in memoryconst card = document.createElement('div');
// Configure properties on the unattached node
card.className = 'card-item';
card.textContent = 'Card title';
Appending
The node will need to be appended to an existing parent node on the DOM tree.
There are two main APIs for insertion:
appendChild() - Accepts a single Node object and returns the inserted node.
append() - Inserts multiple nodes at once and directly takes plain text strings.
const container = document.querySelector('.container');
// Modern Element.append() - handles multiple items or raw strings
container.append(card, 'Additional string node');
// Classic Node.appendChild() - handles a single node
container.appendChild(card);
Removing
You can remove nodes from the DOM with the modern element.remove() method.
This directly removes the element from its parent node.
There is also the legacy parentNode.removeChild() method where you must call the method on the parent node and pass the target child node.
const element = document.querySelector('.card-item');
// Modern direct removal
element.remove();
// Legacy parent-based removal
element.parentNode.removeChild(element);
Handling events
You can tap into user events (e. g. mouse clicks, key presses, scroll events, etc.) by attaching event listeners.
This allows you to trigger DOM changes based on user actions.
Comments (0)