DOM for Dommies

If you do a google search for Document Object Model (DOM), you’ll be presented with a ton of confusing images. So, I decided to create an overview of my understanding of DOM with working examples, for dommies like me.

let button = document.querySelector(‘#middle-button’)
button.addEventListener(‘click’, sayHi)
function sayHi() { alert(‘Hi’) }

Document Object Model

…as you guessed, is what DOM stands for. My best layman’s one-liner for DOM is that it’s a system (model) that changes any thing (object) on a web page (document). A less dommy way of explaining the DOM would be that it’s an object-oriented version of a web page which can be modified with a language like JavaScript.

Before jumping into some working examples of the DOM, let’s break the DOM down piece by piece.

Document

In web world, a document is essentially a website. Web browsers are our windows into the web. Even dommies like me know that. Well, in web world, the term “window” is actually used for what shows (renders) a website (document). Easy so far, right?

Object

An object is any item on a web page. This can be a button, a form or a word (text). Each of these items (elements) are actually held in a specific place on the web page (document) with a structure. This type of standard structure is what allows a system (model) to read the web page (document). Now, let’s take a look at all those images that pop up with a google search for Document Object Model (DOM). They should make at least a little sense now, but don’t worry if they don’t yet.

View fullsize

Model

Here comes the most complicated (and often confusing) part - the Model. For simplicity’s sake, let’s consider the model the ‘system’ that I’ve referred to that actually changes things on a web page. Any dommy knows that code is behind all web pages, and that code is what changes things on those web pages based on how a person (user) interacts with the web page. Well, a very specific type of code (language) that is essentially married to the DOM is called JavaScript. JavaScript has many ways (methods aka functions) to handle those user interactions (events) with the elements (objects) in the web page (document).

JS ❤️ DOM

If you’ve come this far, you have a real head start on understanding front-end web programming! You’re no longer a dommy like I was. I wish someone had broken the DOM down to me in dommy terms like I just did when I first started with JavaScript.

JavaScript is a popular (if not the most popular) language for the DOM. They go hand-in-hand. In fact, JavaScript was built from the ground up for the DOM. Another cool side fact - JavaScript was built in about 10 days! Anyways, now that we have a solid understanding of what the DOM is, let’s use it with some JavaScript.

The Three Steps of DOMination

We’re going to use the Javascript ❤️ DOM system (the model) to change a thing (the object) on a web page (the document). Go ahead and click on the button below. Then, double-click anywhere within the black rectangle that the button is in.

What you just saw was the DOM in action! By the end of this blog post, you’re going to know how to program that working example yourself. You won’t be such a dommy, after all.

Getting to brass tacks for dommies like I was, there are three steps to accomplish our web programming goal of what we just saw in JavaScript. To make it easier to remember, I’ve used each letter of the DOM acronym for this three-step process:

1. Determine (which object in the document)

2. Observe (the object with the model)

3. Manipulate (object(s) with the model)

The black rectangle above with the button inside is actually an entire index.html web page (document). I just embedded it within this blog’s web page. Here’s the code of the entire web page of the black rectangle with the button inside:

<div class='div-container'>
    <button id='middle-button'>button</button>
</div>

<link href="index.css" rel="stylesheet">
<script src="index.js"></script>

The black rectangle is the border of the div element with a class of ‘div-container’. The button element is inside of the div element and has an id of ‘middle-button’. As it is not relevant to DOM for Dommies, I have omitted the index.css code that styled the div element to have a black border and the button to be in the middle of the div element. I’ve also not explained the aforementioned html and css, which I am hoping you already know from HTML & CSS for Dummies. See that index.js reference in the index.html page? That’s for our web programming with JavaScript and the DOM!

Programming the Working Example

Let’s go through our three steps of DOMination to program each of the two user interactions in our working example. The first of the two user interactions was to greet the user with a “Hi” alert if they clicked the button:

Determine (which object in the document)

let button = document.querySelector('#middle-button')

Observe (the object with the model)

button.addEventListener('click', sayHi) 

Manipulate (object(s) with the model)

function sayHi() { alert('Hi') }

With three lines of JavaScript code, you can now say that you are a (dommy) web programmer! Let’s get another round of web programming practice in with JavaScript and the DOM to accomplish our second user interaction in our working example. The second of the two user interactions was to make the rectangle orange if the user double-clicked anywhere within the black rectangle that the button is in.

let div = document.querySelector('.div-container')
div.addEventListener('dblclick', makeDivOrange)
function makeDivOrange() { div.style.backgroundColor = "orange" }

At this point, you’re no longer a DOM dommy. We now understand what DOM is and how to use it. We’ve successfully determined which objects in the document we want to observe for user events, to then manipulate object(s) for user interaction. With JavaScript and DOM we’ve used a system (model) that changes a thing (object) on a web page (document). That’s total DOMination.

p.s. we haven’t gone over how JS & DOM communicate with a server (backend) to change information (data) between a data store (database) and a website (document). That’s a topic for another day, but check out my latest app QuitSh.it to see it in action.