D is for document

The Document Object Model can’t work without a document. When you create a web page and load it in a web browser, the DOM stirs into life. It takes the document that you have written and turns it into an object. In normal everyday English, the word “object” isn’t very descriptive. It simply means thing. In programming languages, on the other hand, “object” has a very specific meaning.

Objects of desire

At the end of the last article, I showed you some examples of objects in JavaScript. You’ll remember that objects are self-contained bundles of data. Variables associated with an object are called properties of the object, while functions that can be executed by an object are called methods of the object. There are three kinds of objects in JavaScript: User-defined objects created from scratch by the programmer. We won’t be dealing with these. Native objects like Array, Math, and Date that are built in to JavaScript. Host objects that are provided by the browser.

From the earliest days of JavaScript, some very important host objects have been made available for scripting. The most fundamental of these is the window object. This object is nothing less than a representation of the browser window itself. The properties and methods of the window object are often referred to as the Browser Object Model, although perhaps Window Object Model would be more semantically correct. The Browser Object Model has methods like window.open and window.blur. These methods, incidentally, are responsible for all those annoying pop-up and pop-under windows that now plague the Web.

No wonder JavaScript has a bad reputation! Fortunately, we won’t be dealing with the Browser Object Model very much. Instead, I’m going to focus on what’s inside the browser window. The object that handles the contents of a web page is the document object. For the rest of this article, we’re going to be dealing almost exclusively with the properties and methods of the document object. That explains the letter D (document) and the letter O (object) in DOM. But what about the letter M?

Dial M for model

The M in DOM stands for Model, but it could just as easily stand for Map. A model, like a map, is a representation of something. A model train represents a real train. A street map of a city represents the real city. The Document Object Model represents the web page that’s currently loaded in the browser window. The browser provides a map (or model) of the page. You can use JavaScript to read this map. Maps make use of conventions like direction, contours, and scale. In order to read a map, you need to understand these conventions—and it’s the same with the Document Object Model. In order to gain information from the model, you need to understand what conventions are being used to represent the document. The most important convention used by the Document Object Model is the representation of a document as a tree.

More specifically, the document is represented as a family tree. A family tree is another example of a model. A family tree represents a real family, describes the relationships between family members, and uses conventions, like parent, child, and sibling. These can be used to represent some fairly complex relationships: one member of a family can be a parent to others, while also being the child of another family member, and the sibling of yet another family member. The family tree model works just as well in representing a document written in (X)HTML. Methods  provided by the Document Object Model:

 

getElementById

getElementsByTagName

getAttribute

setAttribute

 

These four methods will be the cornerstones for many of the DOM scripts you’re going to write. The DOM offers many more methods and properties. There’s nodeName, nodeValue, childNodes, nextSibling, and parentNode, to name just a few. But I’m not going to explain those just yet—I’ll explain each one in turn as and when they’re needed. I’m mentioning them now just to whet your appetite. You’ve read through a lot of theory in this article. I hope by now you’re itching to test the power of the DOM using something other than alert boxes. I think it’s high time we applied the DOM to a case study.