Blog, Learn Tech Skills

DOM (Document Object Model)

The Document Object Model (DOM) is the underlying concept that enables us to create fun, interactive, and dynamic websites.

The Document Object Model (DOM) is the underlying concept that enables us to create fun, interactive, and dynamic websites.

To understand what that means, let’s go back to the days before Web 2.0, before JavaScript, before websites were dynamic.

When Tim Berners-Lee first invented the web as we know it, web pages were relatively plain looking and more importantly, they were static HTML—meaning no rollovers, no photo slideshows, no AJAX, no auto-complete, none of the fun stuff we love about the web today.

Fortunately, no one was satisfied with this state of affairs, so a group of web thinkers got together and came up with the Document Object Model (DOM) as a way to allow developers to manipulate web pages and make them dynamic.

What the DOM does is it defines a bunch of things about web pages.

To start, it says that a website is a document, and within that document are a series of objects. Any HTML element (<p>, <h1>, <div>, <article>, <span>) is an object within the document.

Second, it says that objects are nested inside of one another in a way that can be charted in a tree-like structure, where each object represents a node on the tree. Once you have that tree plotted out, you can access any individual element by locating it’s place on the tree.

Lastly, the DOM defines the relationship between different elements in your document. Each element can have one parent and many children, and in turn, you can use your understanding of those relationships to make changes to individual, or many, elements.

If this seems relatively straightforward that’s because it is. If you have ever written an HTML document, it makes intuitive sense that you’ve got a document, with a bunch of objects (HTML elements) inside, and those elements are nested inside of one another.

What’s important about the DOM is that it creates a foundation that allows for the creation of events, properties, and methods.

Events are anything that can happen on a website—a user action such as a click (the event, click), or a change in website state like when the site is finished loading (the event, load).

Properties are the properties of each individual object in the DOM. A <div> might have a set width, while a <p> has a certain class name, and an <h1> has a background-color.

Methods are things you can do to manipulate objects in the DOM. What most methods do is change the property of an element and do it when an event happens.

For example, let’s say that you want to transform your site in honor of Halloween. You might decide that when the event load happens to the website document you will change the background color property of the document to black, set all of the text to font-family Nosifer, and add an <h1> headline to the top of the document that says “Happy Halloween!”

function halloween() {
    // Set the background to black, and the text to red Nosifer"black";
    // Create a new H1 DOM object and some new text 
    var newGreeting = document.createElement("h1");
    var greetingText = document.createTextNode("Happy Halloween!");

    //Stick Happy Halloween text inside of the new H1 DOM object
    //Find the old headline and its parent element
    var oldGreeting = document.getElementById('headline');
    var parentDiv = oldGreeting.parentNode;
    //Replace the old headline child with the new headline child
    parentDiv.replaceChild(newGreeting, oldGreeting);    

// Do all of this when the web page loads
document.onLoad = halloween();

A terrifying, ghoulish Halloween surprise made possible by the DOM! To take a better look at this code, download the HTML file here. Or check out the live example (if you dare!).

Cocktail Party Fact

When HTML5 created a bunch of new elements like <video> and <audio> and <article>, there were also a handful of new events added to the DOM. After all, you can’t have a <video> or <audio> object that doesn’t have a pause, play, or volumechange event. And what’s the use of HTML5’s offline storage if you don’t have an online or offline event?

Further Reading