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.
What is the DOM?
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.
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.
We’ve discussed houses, browsers, and inverted trees...but how is this all relevant to crafting websites?
What is the DOM in 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.
For a basic example of the DOM in action, check out the demonstration below.
In the code above:
- .style.display='block’ is the action. Once the target element is found, it reveals the text.
The DOM: Keeping the Internet Interesting
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.