Learn Javascript

Document Object Model

Introduction

Some time after both Microsoft and Netscape developed their own Document Object Models, a standard DOM was developed by the World Wide Web Consortium (W3C) - the people who define the standards for web pages. This DOM is usually referred to as the standard DOM or ID DOM since it is accessed using document.getElementById.

The Standard DOM

This DOM is the recognised standard way of referencing objects within web pages and is supported to one degree or another by all version 5+ browsers. Microsoft added support for the standard DOM to their browser while retaining support for their own DOM as well. Netscape decided to abandon their DOM and so their latest browsers only support the standard one.

To access objects within the field you must first provide them with an identifier so that the DOM can reference them. How you do this depends on what type of object you want to reference. Image objects <img> are labelled using the name attribute while all other objects on the page are labelled using the id attribute.

Once your object has been labelled you can then reference that object using the DOM as follows:

Just substitute your label for the label reference in the example. You can then access some of the methods and properties associated with that object on the page by attaching the method or property reference to the end of the object reference. For example to access the 'value' property associated with an object labelled 'myobj' you would use:

The DOM also allows you to access and change the style associated with the object via any attached stylesheets. For example you would access the 'top' positioning of the above object using:

Using What You Know

As with the Internet Explorer DOM, this DOM is best tested for using the object reference itself as follows:

Past Lessons

1. Introduction
2. Decision Making
3. Functions
4. Maintain and Test
5. External Script and Noscript
6. Object Oriented Javascript
7. Loops
8. More Predefined Classes