Developer Dictionary: DOM

This post is part of a resource called Developer Dictionary. More about why I'm writing this here

Imagine a tree. Imagine branches and leaves hanging off of the tree. Now imagine a webpage within a browser, like the one you're using to read this text. Look at all of the stuff on the page. Headings, paragraphs, images, links. They are all related to each other as if they were leaves and branches of a tree. The root of the tree is an HTML element called html and 'below' the root there are elements called head and body. The text you're reading is probably in a p element inside some div elements. (You can right click anywhere on this page, select 'inspect element' and take a look, if you've never before). There are many elements nested in a deep hierarchy. Though the gist of it looks something like this:

Each color represents elements at a different level of the hierarchy within this logical tree. There is some common terminology used to talk about how the elements relate to each other. The head and body are siblings. They are children of html. main is the parent of header and section, etc.

Now that you have a concrete image in your head, we can ask what's the benefit of representing elements in a tree like this?

So What? How is this Used?

All the elements are organized in some way so that we can refer to them and selectively do something with one or some of them.

The concept of DOM allows programmatic access to the tree. It has methods that can traverse the hierarchy and easily select specific elements. The programmer can then do things with the selected elements – change content, change appearance, add some interactivity with HTML, CSS, and JavaScript.

CSS Example

CSS uses the concept of DOM and selectors to target specific HTML elements to style.

p:first-child {
  font-size: 15px;
}

div > p {
  color: green;
}

The first one says "find all paragraphs that are the first child of it's parent element, and change their font size to 15".

The second one says "find all the paragraphs that are children of div elements, and change their color to green".

JavaScript Example

With JavaScript the concept of DOM and selectors is used to 'listen' to events on specific elements (e.g user clicking buttons).

document.getElementById("myButton").addEventListener("click", doSomethingWithButtonClick);

This one says "select the element with id 'myButton' and when it's clicked plan to call the given function 'doSomethingWithButtonClick'".

HTML Example

HTML DOM has methods that can insert or remove elements into the DOM tree and update the content of some elements. For example document.createElement(name), parentNode.appendChild(node), element.innerHTML. They do what the name says.

document.getElementById("foo").innerHTML = "Text changed!";

This one says "select the element with id of 'foo' and change it's display text".

Now you know the essence of the thing called DOM. Oh and that acronym stands for Document Object Model. But you knew that already. Knowing the nouns 'document', 'object' and 'model' alone is not meaningful. But having a visual image in your mind and seeing concrete examples of how it's used, should allow you to retain and connect this concept to other things you may already know.