As a beginning Web Developer, you’ll hear many terms thrown around, and you might be unsure which are important in your study. One of those terms you may have heard is DOM, which is an important concept for Web Developers to learn. In fact, it may be the most important.
But what does DOM stand for?
In this article and the video below, we’ll look at what the DOM is, what it looks like, how it’s used, and why you should care.
What is the DOM?
DOM is an acronym that stands for Document Object Model. It’s how a web browser represents a web page internally.
The DOM determines what content should be on a page and how each element of the content relates to the other elements. Let’s look at each word of the acronym.
Document
We can think of a document as a way to structure information, including articles, books, and scientific papers. For Web Developers, a document is a name for a web page, and they consider the DOM as a model for all the stuff on the web page. The DOM calls this stuff objects.
Object
The “stuff” on web pages are objects and are sometimes called elements or nodes. Here are some objects you may run into on a web page:
- Content. The most obvious objects on a web page are the content. These can include words, videos, images, and more.
- Structural elements. These include divs, containers, and sections. You may not see these elements, but you see how they affect the visible elements because they organize those elements on the web page.
- Attributes. Every element on a web page has attributes. These include classes, styles, and sizes, for example. These are objects in the DOM, but they’re not elements like the content and structural elements.
Model
A model is a representation of something, and it helps us understand how something is put together. There are models for many things that need to be universally understood, analyzed, and used.
One example of a model being used is for instructions. Blueprints, floor plans, and IKEA directions are all examples of this kind of model. They show the object being modeled with enough detail that it can be recreated.
Another example of a model is a description. This type of model is used to simplify big ideas or complex systems so they can be understood more easily. These types of models help us to understand things like our galaxy.
The DOM is a model for web pages. It acts as a set of instructions for web browsers.
What does the DOM look like?
The DOM is represented as a type of data structure called a tree. Every object in the DOM is hierarchically under another object, and any object can have multiple children but only one parent.
Each DOM object “owns” its children. If you remove an object from the DOM, all of its children will also be removed with it.
The DOM itself is digital, so it actually doesn’t “look” like anything, but it can be represented in a few different ways. These representations can help us visualize what DOM is.
Tree graph
One way to represent the DOM is with a tree graph. A tree graph shows the relationship between parent and child objects, with lines between them representing their relationship.
Take a family tree as an example. At the top, you’d have your grandparents. Then, below, you’d have your parents and their siblings, followed by you, your siblings, and your cousins.
Similarly, the root node — the node at the top of the tree graph — of a web page would be the HTML element. Beneath, you’d have the head and body elements. Underneath the body element, you’ll possibly find header, main, and footer elements. Below the header element, you might find img, nav, and h1 elements.
HTML
The most common way to represent the DOM is with HTML. You can take a look at the HTML of a web page by opening the developer tools in your browser or by right-clicking on an element and choosing “Inspect element”. Here’s an example of HTML:
<html>
<head>...</head>
<body>
<header>
<img src="logo.png" /> <h1>Example Site</h1>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>
</html>This list of elements may not look like a tree structure at first, but every indentation in the browser inspector or in the example above is like a vertical level in a tree graph.
HTML elements wrap other elements that are its children. The img element is a child of the header element, which is a child of the body element, which is a child of the HTML element.
Even though this is the most common way to represent the DOM, HTML isn’t the DOM itself — it just represents it.
Source code
There are more ways to create a document than using HTML. You can use a back-end programming language like PHP to generate HTML when a web page is loaded. You can use JavaScript to modify elements in the web page dynamically. Or, you can use a front-end framework like React to create complete web pages without writing any HTML.
Rendered web page
We can also view the DOM in the rendered web page when the browser converts it into something we can see in the browser.
In short, the DOM is a set of instructions on how to build a specific web page. The DOM tells a browser how to render the web page’s content, and we can edit the DOM via source code.
As a critical component of web development, you’ll need to understand the DOM if you’re looking to become a Front-End Engineer, Back-End Engineer, or Full-Stack Engineer. To learn more about building websites, check out our courses on web development.
