DOM: Document Object Model

A web page is referred to as a "document." It is structured like a tree. Each tag forms a node in the tree; nested nodes form branches. Every element in your code contributes to the tree: all the text, all the tags, all the attributes, everything.

This tree is the model that the browser uses to understand your page. It is referred to as the "Document Object Model," or DOM for short.

Let's look at an example. Here is a painfully simple HTML page:

This is how the page looks in the browser:

And here is a simplified diagram of what the page looks like to the browser:

As you can imagine, pages get complex fast. This is a tree of the page you use when you log into your online class: http://online.academyart.edu/login

These tree visualizations were created using Aharef, Websites as graphs.

Javascript can "see" all the branches of the tree. It can talk to and manipulate all the elements in your code. Javascript can move gracefully from node to node, performing the required actions for each node in turn. This is called "traversing the DOM."

The best way to get an idea of what all this means for you is to play with code and see what it does. First we are going to review the basics of the Javascript language, then we're going to get silly.