What is the DOM?

There’s this thing out there that’s sort of tricky to understand. It’s called the DOM, or Document Object Model. It’s one of those things where if you don’t grasp it early on, your days of JavaScript programming will either be very short, at the very worst, or much more difficult than they need to be, at the very best. Trust me when I say this – It’s in your interest to read up on and understand what the DOM is as early as possible. Not only will you feel like a hero after you figure out what’s going on, you’ll also be paving the way for smooth sailing in the years to come.

So, What’s the DOM?

I can give you the, sort of, difficult to understand, “official” definition of the DOM here. It most likely won’t get you any closer to coming to grips with what’s happening, but for the sake of inclusion, here goes:

“The Document Object Model is a platform – and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.” (source)

If you really look at and think about the definition above, you can take away a few points. Without more background and explanation though, it’s lacking.

In order to best explain what the DOM is, I think it would be wise to break apart the phrase, Document – Object – Model. Let’s first look at the document.

What is the Document?

I have to say, Simon Allardice really did a great job explaining things in his video on the DOM. Since I haven’t been able to find anything in writing that compares, I’m going to attempt to paraphrase what he said here. At the bottom of this post though, I’ll link to a few references where you can read about the DOM further.

Whenever I discuss the document, I like to think that if I put my arms around my monitor and give it a big hug, I’d be hugging the document. The document is the page we’re looking at in all its variations. If you look at a web page through your browser the normal way anyone would, you’re looking at the document – colors, pictures and all. If you then right click with your mouse on the page and choose, “View Source,” you’d see the HTML code that made up that page. That’s the document too. The way JavaScript views the page is different than you or I would view it, but JavaScript’s view is the document as well. It’s sort of like looking at a document you’re typing in Microsoft Word and clicking on the paragraph button, so you can visibly see exactly where every paragraph ends. Even though you can’t see those paragraph endings in normal view, it doesn’t mean they aren’t there. Everything, including all variations of code, that it takes to make up a web page is considered the document.

While understanding the document is important, I don’t think it’s as critically important of a concept to grasp as the object part of the DOM. After all, it’s the objects that you’re going to be playing with during all that JavaScript coding you’ll be doing.

What is the Object?

Simon Allardice explained objects in the document as “things.” He said that headlines on a webpage are objects, as well are paragraphs, pictures, etc… If you’re looking at the source HTML code of a web page, tags and elements are objects. The text part of the page elements are also objects. I’ll give you some example code below and then go over what would be considered objects in that code.

<!DOCTYPE html>
<html>
    <head>
        <title>This is my title</head>
    </head>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
        <ul>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
        </ul>
    </body>
</html>

If you look at the above code, each line can be considered an object. The thing is, if you look inside the H1 element, the text withing the element is also considered an object. The same thing goes for the paragraph element. Each list item is considered an object as well as the unordered list itself, so that’s an object within an object.

It’ll take some practice to become comfortable with objects in the document and what you can do with them, but that’s really the heart of JavaScript. Manipulating objects. As you code and code and code, it’ll become second nature.

All we have left now is the model part of the DOM. The idea behind this is fairly straightforward because we’ve probably seen models throughout our entire lives. All a model is, is an easy to understand interpretation of something more complex. Take a schematic or a family tree for instance – those are models. Let’s answer the final question.

What is the Model?

If we think of our HTML code as a tree structure, we can begin to understand what the model of the DOM looks like. We can think of our code more graphically to assist us. Take a look at this image from the W3C.

DOM Tree Structure

That image represents the following code of an HTML table:

<TABLE>
<TBODY> 
<TR> 
<TD>Shady Grove</TD>
<TD>Aeolian</TD> 
</TR> 
<TR>
<TD>Over the River, Charlie</TD>        
<TD>Dorian</TD> 
</TR> 
</TBODY>
</TABLE>

As you can see, the top of the model begins with the TABLE tag and filters down throughout all other elements that follow. The parts of the above code, such as the “TBODY” tag or the “Shady Grove” text are called, “nodes.” Nodes can have parent and children nodes and this is how JavaScript interprets what to manipulate during its processing of code. The model part of the DOM refers to exactly what the nodes are called and how they relate to one another. It’s their interaction and their structure that creates the model.

I tried my best to describe what the DOM is, but I think I’ll always feel my description didn’t go nearly far enough. If I had to describe the DOM to someone the simplest way I could, I’d say that “the DOM can be described as how all the pieces of what creates a web page can be identified, react and relate to one another.” That, my friends, is the best I could do.

As promised, I’m going to list a few sites below that can help you further with this topic. The DOM can get much more technical than the ideas I just expressed, so it’s really a good idea to get as familiar with what’s going on from as many sources as possible.

– What is the DOM? by CSS-Tricks

– What is the Document Object Model?

– Introduction – Web API Interfaces by MDN

– JavaScript HTML DOM by W3Schools

– JavaScript – W3C DOM – Introduction by QuirksMode