Websites have come a long way since the turn of the century. What were once collections of basic text-based pages have evolved into a network of carefully crafted experiences, completed with elements like responsive buttons, parallax scrolling, and personalized content.
But how do these web design features come to life? That's where the Document Object Model (DOM) comes in. In this guide, we'll explain what the DOM is and why it's a key component of the web browsing experience.
Before getting started, you should already be familiar with the basics of HTML, CSS, and JavaScript.
What is the DOM?
The Document Object Model (DOM) is a programming interface for HTML. It translates the content of an HTML document into a standardized object that functional programming languages like JavaScript can easily access and modify. Since most web page events are driven by non-HTML code, all dynamic web pages rely on the DOM to display and function properly.
To better understand why the DOM is useful, let’s first discuss what an “object” means in computer programming.
What is an object?
When boiled down, the ultimate task of computer software is to perform actions on data. Data comes in all different types: numbers, characters, and words, to name just a few.
The more a program does, the more data it needs to process and handle. Without a scalable, organized system for doing this, the increasing complexity will cause bugs. Nobody likes bugs.
So, to organize related pieces of data, programmers use a data type called an object. Objects are unique from other data types because their purpose is to hold other data. An object contains related pieces of data under a common concept, stored in a hierarchy.
Here’s an example: Suppose you’re building a piece of software that stores information about houses. In real life, houses contain a lot of things — rooms, furniture, appliances, and people, not to mention other relevant information like the neighborhood, address, and number of floors.
If you wanted to represent a house variable in a software program, it wouldn’t make sense to store all this house-related data separately. Instead, you might create a “house” object for each house in the system, and put all the house things inside it. A “house” can contain data for all the information we described above, and much more.
You can even put objects inside other objects. In our example, a house object might contain “room” objects. You can designate one room object as a kitchen, which itself can contain data for appliances, countertop material, etc.
The main takeaway here is that objects group data together in a logical, hierarchical way. To better understand this, it’s helpful to imagine an object like a tree. Well, more like a tree that’s flipped upside down. The name of the object is like the “root” of the tree, and all its branches are like the data stored within. Here’s a tree to visualize our house object:
Why We Need the DOM
Before I get carried away planning my mansion, let’s tie this object concept back to HTML. Take a look at this basic HTML file:
Notice its parts are also structured in a hierarchy. The <html> tag acts like the topmost “house” in our example. Inside our HTML “house”, we have our <head> and <body> tags, which are like our rooms. Finally, there are the most specific elements: <title>, <h1>, <h2>, <p>, <img>, and <button>. Think of these like room-specific items, like the bed and a lamp.
Elements in an HTML document are structured this way for the same reason as objects: A hierarchical structure helps computer programs to read and process the information. In the case of HTML, your web browser is the program, and scripting languages like JavaScript are what change and modify the HTML code.
But, there’s a problem. HTML documents by themselves are not objects. They cannot be read by JavaScript without some sort of file-to-object translation. This is where the DOM comes in.
The DOM represents an entire HTML document as a single object. To create the DOM, the web browser reading the HTML file takes in all its parts, from the root <html> element to the smallest <span> tags, and outputs them as an object that JavaScript understands.
The word “represent” is important here. The DOM is not a copy of the HTML file — it’s simply a different way that the web browser organizes the HTML information.
The way a browser creates the DOM is similar to how it creates a web page. When you open any page in your browser, you’re seeing the browser’s visual representation of the underlying HTML. You’re viewing the same content, but organized as a page that your brain can easily comprehend. The DOM is another way your browser represents the HTML. In the DOM, the HTML is organized into an object that JavaScript can easily comprehend.
Remember my tree example from earlier? Here’s how the DOM would represent our simple HTML file as a JavaScript-friendly object:
One more thing to note before we continue: The DOM is not specific to JavaScript. Any programming language (e.g., Python, C++) can use the DOM to modify web pages. However, JavaScript affects most pages we see on the web, so it’s the only programming language you need to know to understand the DOM.
We’ve discussed houses, browsers, and inverted trees...but how is this all relevant to crafting websites?
What is the DOM in web design?
In web design, JavaScript is used to control the behavior of web pages. The DOM links JavaScript to the source HTML code, which enables JavaScript to execute its functions on individual HTML elements. This JavaScript-HTML interaction creates the experience of interactive web design.
Not only are objects good for organizing data — but they also allow programs to easily access specific pieces of data within them.
Returning to our house object, let’s say you wanted to edit the “kitchen_countertop” element of a particular house. To do this, your program just needs to find the house in question, traverse down the object tree into the kitchen object, then change the “kitchen_countertop” element from “quartz” to “marble”. Nice choice.
In the same way, the DOM provides JavaScript with access to almost every element in an HTML document, from the entire page to a short line of text.
Whenever something happens on a web page after page load (e.g., a button click submits a form or an element changes size/color), that’s JavaScript code targeting a specific element via the DOM and making a change. JavaScript code can be located in its own .js file or even within the HTML document itself.
For a basic example of the DOM in action, check out the demonstration below.
The left panel contains the source code, and the right panel shows the code displayed as a web page. The moment you press Click me!, the following JavaScript runs.
In the code above:
- document is JavaScript’s way of targeting the HTML file object through the DOM. It’s telling the browser, “I want to go into the HTML file to make a change.”
- .getElementByID(‘demo’) targets the page element with the ID “demo”. This is the element that JavaScript wants to modify. To get there, JavaScript starts at the highest <html> tag, then traverses through the DOM until it hits the element with the text “Hello JavaScript!”
- .style.display='block’ is the action. Once the target element is found, it reveals the text.
Complex web pages execute these calls hundreds of times as users interact with them. JavaScript uses the DOM every time.
The DOM: Keeping the Internet Interesting
Hopefully, you see why the Document Object Model is so central to modern websites. Without it, JavaScript wouldn’t be able to alter web pages in cool ways — we’d just have a slew of boring, static web pages.
You’ll never need to worry about programming a DOM yourself, since the web browser does all the work for you. Still, whether you’re trying out new page effects on embarking on a website redesign, it’s useful to know the inner workings of your online presence in case you need to quickly debug, or if you just want to know what’s really going on under the hood.
Editor's note: This post was originally published in August 2020 and has been updated for comprehensiveness.![Blog - Website Redesign Workbook Guide [List-Based]](https://no-cache.hubspot.com/cta/default/53/4b5bb572-5d0e-45b8-8115-f79e2adc966b.png)
![11 Types of Websites to Inspire Your Own [+ Examples]](https://blog.hubspot.com/hubfs/types-of-websites.png)
