|
| D O M |
|
|
|
| Document Object Model |
|
|
 |
|
| This document takes 10 to 15 minutes to read |
|
Now that we've covered the HTML language and the CSS specifications, we'll delve into the intricacies of the Document Object Model, or DOM for short. As its name implies, DOM is the process of accessing and perhaps changing the properties of the individual objects that comprise your Html document. Every object in your page has a certain set of properties associated with it. Those properties are the equivalent of the attributes of a tag or the rules used in Cascading Style Sheets. Each of these attributes or rules may be changed or set by a simple DOM statement or by a more in depth JavaScript function. We'll concentrate for the time being on the more simple DOM statements, accumulating your knowledge until a JavaScript function will make sense to you, the reader.
You'll see as you progress through the following chapters that the specific implementation of the DOM language is different from browser to browser and from operating system platform to platform. In the DOM reference section of this book, you'll see that some of the DOM statements for each of the two major browsers - Microsoft's Internet Explorer and Netscape's Navigator - differ slightly in their implementation. The valid DOM statements for each browser are included with the reference for each object, property, method, and event handler. As for operating systems, I've assumed that everyone is using either the Macintosh Operating System or Microsoft's Win32 platform. Where a discrepancy exists between the implementations of these two operating systems, I've noted it in the reference section of this book. For the explanations, discussions and examples of the DOM language, I've assumed that everyone is using Internet Explorer on the Win32 (Windows) platform.
In an effort to alleviate the confusion caused by the individual implementations of DOM by the major browsers, the W3C is working on a universal standard which will hopefully be embraced by the major browser vendors. Until then, we'll just have to slug it out with the varying uses and implementations of DOM and its associated languages, most notably Html and CSS.
Within the DOM specifications, there are five separate components that are used to construct a valid and complete DOM statement. They are as follows.
 Objects
Methods
Arrays
Properties
Values
While you most likely won't use all of the above components in one statement, you must know and understand the capabilities of each. The easiest way to learn is to just dive right in. With that in mind, consider the following valid DOM statement. Try to spot the Html tag and attribute which this statement reflects. Drawing on the Html knowledge gleaned from previous chapters, you'll find that it is very easy to do.
document.body.alink = "red"
This DOM statement changes or sets the color of the 'active link' to be used within the entire page. Did you spot the BODY tag and its attribute, 'alink'? This is what DOM is all about - reflecting the existing Html and CSS commands which are part of your finished web page. Using these reflections, you may change or set the values for almost every tag, attribute, and CSS rule.
The 'document' part of the above statement is an object that represents the entire page contents - the entire 'document'. The browser, in implementing DOM, sees the complete web page as an object that is the container for other objects, methods, or arrays. The 'body' part of the above statement is an object within the 'document' object. The 'alink' is a property of the 'body' object, and the 'red' after the equals sign is a value of the property, 'alink'. This hierarchical approach is common to all DOM statements.
Every Html tag and every CSS rule has an object associated with it. The object itself is what is accessed when stating a value of a property - the property is one of the values of the object. There are about 120 objects within the DOM specifications, with about 400 properties that are used to describe the action that is to be assigned to the object. There are about 100 methods, and sixteen arrays. The total number of event handlers is about 40. The amount of values that are available is just too high to attempt to count, easily numbering in the thousands.
In your use of the DOM specifications, it is extremely important to be able to distinguish an object from a method, and a property from an object. Spotting the DOM method is simple - the statement is completed with opening and closing brackets. Often there is a value nested within the brackets. The array is completed with opening and closing square brackets, while the value is enclosed within quotes, acting as the terminator of the statement. Spot the object within a statement by the fact that the object name is often the exact Html tag name whose functionality it reflects.
The easiest way to distinguish an object from a property is to draw on your knowledge from the preceding chapters on the Html language. Just as every tag has an object, every attribute of a tag has a property. That is, the properties of an object are often the exact terms used as the attribute name in Html.
The CSS rules and values reflected within the Document Object Model are accessed through the 'style' object - any statements following the 'style' object must be the DOM equivalent of a CSS rule. The values of the rule are placed after the equals sign, enclosed within quotes.
|
|
|
|
The DOM Statement
With DOM you may change colors, set borders, create flying objects, define draggable screen objects, and just about anything else you can dream up. All Html tags, attributes, and event handlers as well as all CSS rules and values may be accessed through the Document Object Model. Using DOM statements, you may actually construct your entire document without using Html or CSS commands, though it isn't practical because of DOM's high cost in terms of bandwidth. DOM simply isn't meant to be used to build whole pages with - some Html and CSS is a requirement. The example below shows perhaps the simplest valid DOM statement, which is how to change the color of the links within your document.
document.link = "red"
This DOM statement changes the color of the links within your page to the named color, red. Simple. The value 'red' is associated with the 'link' property, which is valid for this 'document', which is an object. All DOM statements begin with an object, which is followed by a property of that object. The property of the object is then followed by the value, which in this case was a color. All objects and methods are separated from their properties by a period. All values are separated from their properties by an equals sign, and are enclosed within double quotes. This convention is universal to all DOM statements, with no exceptions. It is this strict adherence to syntactical rules that makes DOM so easy and versatile to use.
Where you apply your DOM statement is as important as the statement itself. In using CSS with Html you've seen examples of this. Applying the attributes for a color to the BODY tag resulted in the color being rendered for the entire document. Applying the same color to one individual element or groups of page elements resulted in only those elements being colored. It is the same in DOM, but with a few exceptions.
In DOM, every statement references the properties of a tag or the rules of a style sheet, which are the properties of an object within your page. Take the previous example of coloring all the links within the page the color red. This is a global statement because it is applied to the 'document' object without specifying any other object or property. The sequence in which you state your DOM instructions is very important in that it defines where your value will be applied. The placement of your values and properties is logical and ordered. Take the color property, for instance. Stating it with the background property will color the background. Stating it with the link property will color the link.
The DOM Statement Heirarchy
In your use of DOM, you'll see that the wording you use is of paramount importance. The individual wording obviously tells the browser what changes or modifications to make, and when. Most DOM statements begin with the 'document' keyword, which indicates that the following instructions are to be carried out within the current document. An optional window name may be stated before the 'document' keyword to indicate that the instructions are to be carried out in a different window or frame of that name. To make the implementation of DOM within your pages logical and ordered, and thus easy to use, a hierarchical approach is taken in the construction of your DOM statement. That is, when the browser reads your page, it constructs a tree consisting of the individual HTML tags, attributes, and values stated within it. Tags are higher within the tree than are attributes, and attributes are higher within the tree than are the values of that attribute. Tags appearing at the top of the HTML document are higher within the tree than are the tags preceding it. The stated portions of the HTML document must obviously be valid, and the DOM statements you specify must fit within this tree.
Understanding The Document Heirarchy
In working with objects, it is important to know and understand the cascading effect in which your DOM statements will be applied. The most basic DOM statement consists of three statements - an object and a property of that object, followed by the value that is to be changed. The browser, when reading an html document, constructs a hierarchy of cascading objects, each being referenced by the object that is higher in the hierarchical tree. Understanding this hierarchical approach is crucial to building valid, functional DOM statements. Consider the following sample code, which was stated on a previous page.
document.body.alink = "red"
When the browser reads this statement it looks in the hierarchical tree it has built for the document. If it finds a match, it applies the value, which is in this case is a red colored active link. The thing to understand is that the DOM statement must reflect the components of the object tree that the browser has built when it read the document. There are a few simple rules to help you understand this tree, and how it is built.
The 'document' object is almost always the highest on the tree, since the 'document' contains everything else within the web page.
The tree is built in source code order. That is, the objects that are higher in the document source code are the highest on the tree.
Html tags are higher in the tree than are the attributes of that tag.
Html attributes are higher in the tree than are the values of that attribute.
Html tags such as BODY that encompass the entire rendered portion of the document are higher on the tree. This includes the FONT, HTML, and perhaps a SPAN tag, if it is encompassing the entire BODY portion of the document.
Deeply nested tags such as tables within tables are lowest on the tree.
CSS rules are considered to be low on the tree, since they are accessed with the 'style' object, which is at least four graduations down from the top of the tree.
Keeping these rules in mind, consider the following example.
document.all.elementID.style.bgColor = "blue"
In reading this statement, your eyes have passed over the hierarchical tree, from top to bottom. The highest on the tree is the 'document' object, since the 'document' is the container for everything else on the tree. The second from the top is the 'all' object. Next comes the elementID, which you'll learn about in a later section of this chapter. Next is the 'style' object. Beneath that is the bgColor property. Following the property is the value in quotes, 'blue'. Can you work out what this statement changes? It changes the background color of the element that has been assigned the elementID (through the use of the ID or CLASS attributes. Don't worry; we'll get to that soon).
This method of working down from the top of the hierarchical document tree is the way DOM accesses the objects which the browser has built into the tree itself. Deeply nested objects are accessed through very long (sometimes ridiculously long) statements. The general rule is that if the statement is more than six or seven components long, it is time to think about restructuring your Html document into something more streamlined.
|
|
|
|
DOM with ID and CLASS Selectors
Using CSS style rules within your document greater reduces the complexity and size of your finished product while providing a large array of effects and user customization. CSS style rules are used in some way within almost all of today’s Internet documents. Recognizing this wide spread use, the makers of the Document Object Model have provided a means to change or set these style rules on the fly. There is a DOM statement to fit almost every CSS rule that has been created. The gateway to these CSS rules is the 'style' object implemented within Internet Explorer. It uses the HTML ID and CLASS attributes to know where to apply the changes you desire. Used with event handlers, you may change or set every aspect of your document. Colors, fonts, sizes, alignment, margins, and just about everything you can imagine can be changed on the fly according to user action. While these concepts will be addressed in a later lesson, the point at which to begin is simply learning to assign the action to a very specific place.
To specify where the actions are to be placed, a unique ID or CLASS attribute must be stated. This indicates to the browser that the tag the attribute is stated within is unique within the document. CSS rules may then be assigned accordingly.
The ID and CLASS Selectors in a DOM Statement
As in Html and CSS, in order to apply a DOM statement to a specific page element you would use the ID or CLASS element selector. The selector is stated as part of the DOM statement, between the object and the object property, as in the following example.
document.all.banner.style.bgColor = "red"
This sample bit of code assigns a value of red to the page element that has been assigned the ID or CLASS identification of 'banner'. You would of course use a value that has something in common with the page element to which you are applying the value. For example, assigning a color value to an element whose only definitive property is its border width just doesn't make sense. Common sense is applicable at all times.
You'll use this method of assigning a value to a specific ID or CLASS identifier often in your continuing use of the DOM specifications. Using the various properties available from the aforementioned 'style' object, you'll be able to access and change all of the rules that have been set using the CSS specifications.
DOM and CSS Rules
Now that you've covered the use of ID and CLASS selectors with DOM, it is time to cover the implementation. To access the CSS rules within a document, DOM has provided the 'style' object. Stated with an ID or CLASS selector, the style object is the link between the higher 'all' object and the property you wish to change. There are about four hundred different properties available to be changed within every individual document you'll be working with. There is a bewildering amount of different values you may assign to these properties.
Accessing CSS Rules via DOM
As you've already learned, assigning a CSS rule to a block of text is a streamlined and efficient use of both your bandwidth and your time. In order to access the CSS rules through the DOM specifications, you would use the 'style' object and its long list of available properties. Consider the following example of the syntax involved in accessing your CSS rules through the Document Object Model.
document.all.elementID.style.CSSproperty = "value"
Through the use of the 'document.all' and 'style' objects, every rule and value available from the Cascading Style Sheet specifications may be set or changed. Using the ID or CLASS selectors, you can assign a CSS rule to be changed or set for an individual page element or a block of page elements. The elementID is the ID or CLASS selector name that you have assigned to that page element. The CSSproperty is the Html attribute that you would like to set or change. Valid DOM values for the CSSproperty can be found in the DOM reference section of this book, as can the "value" listings.
Although the 'style' part of the aforementioned statement is itself an object, it is also a property. That is, it is a property of the 'document.all' group of objects. This somewhat confusing nomenclature will become clear to you as we progress through the use of the Document Object Model.
The values you specify using the above DOM properties will over-ride any previously existing CSS rules assigned with the STYLE attribute, the STYLE tag, or style rules from an external style sheet. For example, the following entry within an external style sheet will be applied when the document is loading:
#table1 {color: "lightpink"};
Then, through the use of an onLoad event handler within the BODY tag, the color of the text within the table1 container may be changed with the following statement when the document has completed loading:
<BODY onLoad="document.all.table1.style.color = 'darkpink' ; return true">
You can see that the initial CSS rule stated within the external style sheet is overridden. This is applicable to all style rules, no exceptions. Any event handler or combinations of event handlers may be used, as well as any valid DOM statement.
|
|
|
|
Using DOM Arrays
Within the DOM Language specifications are about sixteen arrays that are used to access the properties of the object within the HTML document you are working with. Arrays are called Collections by some because they collect information about the objects within the document being worked with. The sixteen arrays we'll be working with are listed below.
all[ ] - contains references to all the items within the page.
anchors[ ] - contains a reference to every instance of the anchor tag within the document.
applets[ ] - contains a reference to every instance of the APPLET tag within the document.
classes[ ] - contains a reference to every instance of the CLASS attribute within the document.
children[ ] - contains a reference to every child of a parent container within the document.
embeds[ ] - contains a reference to every instance of the EMBED tag within the document.
filters[ ] - contains a reference to every instance of the CSS FILTER attribute within the document.
forms[ ] - contains a reference to every instance of a FORM element within the document.
frames[ ] - contains a reference to every frame within the document.
ids[ ] - contains a reference to every instance of the ID attribute within the document.
images[ ] - contains a reference to every image included in the document through the use of an IMG tag.
links[ ] - contains a reference to every instance of the anchor tag within the document.
plugins[ ] - contains a reference to every plugin which is valid and operating for the document.
scripts[ ] - contains a reference to every instance of the SCRIPT tag within the document.
stylesheets[ ] - contains a reference to every instance a style rule is used within the document.
tags[ ] - contains a reference to every valid HTML tag within the document.
You can see from the above array listing that the contents of the arrays can be deduced just by their names - the anchors[ ] array contains all of the anchors defined by the tag within the document, for example. Using arrays only, you can access all of the elements within the HTML document. There is even an 'all[ ]' array, which contains every single element read by the browser. Accessing the content of any array is fairly simple and logical. Every item within the array is represented by a number that represents its order within the array. Think of the array as a list of items, like a shopping list. Now number the list starting at the top. Since the number zero is considered a whole number by most programming languages (including DOM), start your numbering at zero. The array items, then, can be accessed by citing the number, the index number, that contains the page item you wish to act upon.
Accessing the Array Items
Now that you know how the items within an array are ordered (indexed), we can now move on to how you actually access the contents of an array. Consider the following example.
window.document.anchors[3].style.color="red"
The above example shows the change of color for the fourth instance of an anchor within the document to the named color, red. The window statement is optional, and if it is left out of the statement the browser assumes the command is to be performed within the current window. Notice that the number within the square brackets is the number three yet is referencing the fourth instance of an anchor. This is because the arrays are zero based. That is, the numbering starts and includes the number zero. All of the arrays you'll be working with for most languages work in this way, so get used to it now.
In the above list of arrays, you can see that using the arrays compiled by the DOM engine can be a very useful way to achieve your desired effect. The array items can be used to change the appearance of your page on the fly, according to user input. In the use of the arrays, it is not only appearance that can be affected - you can also use the arrays as powerful reporting tools. Consider the plugins[ ] array. It contains a list of all of the plugins that can be used by the browser. That is, all the plugins your user(s) have installed to their browser. You may devise a script that checks the list to determine if the required plugin is installed, or you can print the list to the screen. Printing the list to the screen is fairly simple to do; all that is required is a JavaScript document.write statement, which you'll find in the JavaScript Language Reference and within the JavaScript Tutorial.
|
| | |
