Sidebar


Introduction to DHTML's Object Model

The concept of the Dynamic HTML Object Model, and the rules of inheritance that govern it, are at the core of the new directions in Web development, whether you're thinking about Dynamic HTML, or, further down the road, XML (Extensible MarkUp Language), which will act as sort of a template for other Web formats. The rules of inheritance as they pertain to Dynamic HTML follow the parent-child model, in which one element, the child, inherits properties from another, the parent.

If you're an experienced programmer with a background in object-oriented programming, you already know the drill and will be interested mainly in how Dynamic HTML applies familiar concepts to such particulars as CSS1 style-sheet development, positioning selectors and their containers, and, of course, JavaScript and VBScript. You'll also want to stay alert for the differences between the concept of inheritance as utilized in Dynamic HTML, in which it is only loosely applied, and in the two major scripting languages, in which it is really not applied at all, but uses an object structure that involves the use of containers.

The object model in Dynamic HTML is based on a hierarchy that generally starts with the window, and works its way down. The way in which it does so depends on the scripting mechanism being used.

The concept of the Object Model is rooted in the world of object-oriented programming. Technically, JavaScript and VBScript are not object-oriented, they're object-based. In full-fledged object-oriented languages like Java, inheritance among objects is a key aspect of programming. By re-using "classes", which represent abstractions of objects with the same property and method definitions, you can significantly reduce the size of your code. Each object is considered an "instance" of a particular class, and their properties are "instance variables."

The concept of inheritance is one of the most powerful concepts in object-oriented programming. Dynamic HTML borrows heavily from this concept, but does not utilize a strict interpretation. In fact, JavaScript and VBScript have no inheritance scheme other than as points of reference. Inheritance in Dynamic HTML is more of an abstract concept applied when developing style sheets and positioning selectors, which influence each other based on their parent-child relationship.

Although JavaScript and VBScript are not object-oriented languages, they do employ a concept with roots in object-orientation that revolves around the object "type." For example, JavaScript has built-in GUI objects such as buttons and data objects such as the date, string, and math objects. Rather than creating objects by declaring a set of variable types inherited from established classes (as in object-oriented languages) you simply create a new object with the statement new, and define its parameters with a function that carries the same name as the object.

Although inheritance is not a feature of these scripting languages, the parent-child concept is, and it's an important one. To avoid confusion some avoid the phrase "parent-child" altogether, describing JavaScript's object model as based on "containership." Built-in objects are accessed by dot notation, which relies on an ordering system dictated by the parent of an object. For example, in the code:

function objectsEverywhere() {
var objectBig=document.form1.words.value

a specific object is assigned to the variable objectBig and accessed by navigating through the object hierarchy using dot syntax.

Microsoft has extended the Document Object Model for Dynamic HTML to include every element of HTML. Microsoft also defines properties and methods for HTML elements.

The Document Object Model as defined by Microsoft addresses what the company sees as the limited functionality of the JavaScript Object Model, which only gives you access to certain HTML objects (document, window, form, and so on). The Document Object Model (see Figure 1), on the other hand, allows a developer access to each and every HTML element and attribute according to specific rules of access, as described in the Microsoft Internet Client SDK.

As it stands now, this particular kind of "event-driven" code is supported only by Internet Explorer 4.0. Understanding why requires closer scrutiny of Internet Explorer components.

Internet Explorer is ActiveX

The executable application called Internet Explorer is really little more than a shell that contains other components that do most of the work. One component is an ActiveX document called the HTML Viewer (MSHTML.DLL), which is called by the Web browser object. (By itself, the browser object can't do much more than ask the HTML Viewer ActiveX Control to display the requested URL through one of the browser object's functions.) The Web browser's functions are strictly navigational: refreshing and opening pages, going back and forward, and so on. The HTML viewer, in turn, acts as a manager of sorts, delegating calls to objects from one of the two scripting engines, which exist as yet additional components. The HTML viewer parses HTML, but when it encounters the SCRIPT tag it must refer its contents to either a JScript (JavaScript) scripting engine or a VBScript scripting engine, which then executes the code.

The window object is the parent of every other object in the Dynamic HTML Object Model, including the Document Object Model, which is at the core of Dynamic HTML's functionality. The Document Object references everything contained within a Web page: elements, events, methods, properties, and collections. As in JavaScript, elements accessed in the Document Object Model must reference the document object first, as it is the parent of all the other objects. Fortunately, you can often use this as a referencing shortcut.

This access to each HTML element in Internet Explorer is made possible by built-in method calls. The disadvantage is that it doesn't work with Navigator; the advantage is that it is extremely easy to write, and because the calls are contained within the elements, their code is ignored by other browsers.Thus, you can write Navigator-specific code right next to it.

Finally, platform independent, vendor neutral specification for the Document Object Model is currently under consideration by the W3C. -- C. W.