Class 5 – What is the Javascript Document Object Model?

Posted: October 23rd, 2009 | Author: | Filed under: javascript | Tags: , , , | No Comments »

In your studies of Javascript, you will most likely come across the Document Object Model (DOM for short) at some point. The DOM is simply the internal representation the browser has of the contents of a web page.  We have already discussed some aspects of the DOM without calling it such.

The layout engine

Whenever you write XHTML and CSS code, the web browser does some internal processing to determine out how the page is supposed to look.  The part of the browser responsible for this task is known as the layout engine.  The different browsers often have slight different layout engines which means the browsers sometimes display the contents of any given page slightly differently.

The internal representation that the browser makes of the page, the DOM, is made accessible to any Javascript code on the page as a series of built-in Javascript variables.   For example, “window” is a built-in variable that holds information about the entire browser window.   “document” is another built-in variable that contains all the information about the content in the <body> section of the page.

Developers can write Javascript code to interact with the DOM to either detect or to change how the page is internally represented.

Object-oriented DOM variables

These built-in variables that hold the browser’s internal DOM information are object-oriented, which for our purposes means that these variables do not necessarily hold just text or numbers.  They often are wrappers that contain other properties, functions, or other objects “inside” of them.  For example, the “window” object has a “title” property inside of it, which is simply a variable that holds the text inside the <title> tag in the XHTML.

When one property, function, or object is inside of another, we use dot notation to indicate the hierarchical relationship.  So window.title indicates that title is a sub-property of the window object.  The code window.close() tells the browser to run the function called close() that is inside of the window object, which happens to close the window automatically.  Similarly, window.alert(“hello”) tells the browser to run the alert() function of the window object and pass it the parameter, “hello”.

The DOM on a need-to-know basis

There are lots of built-in variables, objects, and functions in the DOM, and it can easily become overwhelming.  However, in practice, we only use a few of these.  Don’t try to memorize them all.  By following the conventions taught in this class, it is not necessary that you delve too far into the details.

There are some things you will want to know:

  • window is the highest level DOM object.  All other DOM objects are sub-objects of window.  In fact, your own variables and functions that you define in your code are also automatically created as sub-properties of window.
  • document is a sub-object of window.  So to get access in Javascript to information concerning the stuff inside the <body> tag, you use the window.document object.  Fortunately, for convenience, you can refer to the document object as simply document.  It’s not necessary to specify the full window.document variable name. The “window.” part is implicit in all variable names, so you don’t need to write it.
  • You can get the DOM representation of any element in the <body> tag by using the getElementById() function of the document object.  For example, var el = document.getElementById(‘foo’); will find the XHTML element that has the id attribute set to “foo” and store it in memory in an object named “el”.    The variable “el” now holds an element object, which is a standard type of object used to hold all the information about individual XHTML elements.  Element objects have a variety of properties and functions that are especially useful when dealing with individual XHTML elements.
  • The className property of the element object holds the name of the class that is specified in the XHTML.  For example, to detect the class of an XHTML element that looks like this <p id=”p1″ class=”foo”>…</p>, you would first get an element object that holds information about this element by using var el = document.getElementById(‘p1′); Then you would access this element’s className property by referring to it as el.className.  For example, if you said, alert(el.className);, the word “foo” would pop up in an alert window.
  • The style property of the element object contains information about the CSS used to control the design of that element in the browser.  For example, to get the font-size property of an element such as <p id=”p1″>, you could (in theory), access that information through the DOM by referring to the element’s style.fontSize property in Javasacript.  First you would get a reference to the element object by using var el = document.getElementById(‘p1′);, then you would access this element’s font-size property, for example, with alert(el.style.fontSize);
  • Image elements have a src property which represents the source file used to display the image.  For example, if you have an image tag in your XHTML like this, <img id=”img1″ src=”images/monkey.jpg” />, you can manipulate the src attribute in Javascript by doing something like, var el = document.getElementById(‘img1′); img1.src = “images/cat.jpg”;

See also

Related posts:

  1. Class 5 – Document Object Model Cheat Sheet
  2. Class 5 – Javascript Variables
  3. Class 5 – Javascript Functions
  4. Class 5 – How to place Javascript code on a page
  5. Class 5 – Basic Javascript Examples

Leave a Reply