| Lesson 4: DOM Today we are focusing on the heart of interactive scripting, the Document Object Model or DOM for short. This is a collection of all the objects contained within an HTML (or XML) document, and through JavaScript (or other scripting languages), we are able to alter or otherwise effect almost all of them. As much as 90% of all of your scripting will be centered around the DOM, so it is highly recomended you read up on the evolving standards in the DOM movement to date! 1) Document Object Properties and Arrays Here is a partial list of the Document Object's Properties (those with brackets [] are arrays, you will learn more about arrays in a future thread) in alphabetical order: alinkColor anchors[] bgColor cookie domain embeds[] fgColor forms[] images[] lastModified linkColor links[] location referrer title URL vlinkColor Together, these properties constitute 90% of most HTML (or XML) documents. To access any of them, you would reference them from document down (window is implied), examples: document.bgColor document.links[n].href document.images[n].src document.images[n].width The n in the brackers represents the place in order from top to bottom of the page the item appears in relation to other items of the same type, with the numbering starting with zero instead of one. So to find the url of the third image on the page, you reference the document, then the images array using the number 2 (counting 0,1,2), then the src attribute: document.images[2].src And to change the image, we use the same syntax, adding an equals sign and a url enclosed in quotes: document.images[2].src='New_URL_Here'; 2) Document Object Naming To make your scripting easier to understand, and less confusing (hence less error prone), it is highly recomended you give all your HTML elements a name and or id attribute. Naming an HTML element, such as a link or a form or a form element, creates a Document object property, whose value represents that of the HTML tag. So if the third image in the above mentioned page had a name attribute such as name="bird", JavaScript could reference it via the name rather than the often confusing arrays: document.bird.src And setting a new image url would be document.bird.src='New_URL_Here'; 3) Document Objects's Events The key to interaction is to have the browser somehow recognize an event, and do something appropriate as a result based upon the data provided at the time of the event. Examples of events are moving the highlight box over a link, or clicking on a radio button, or selecting an item on a drop down menu, or changing the value of a text box, ect. The DOM provides the means to react to each object's events, and even a means to alter the event handlers written into your HTML coding (remember onMouseOver and onClick ect?). The challenge for the scripter is to anticipate as many relevant events as possible in order to provide for them in your scripting. Sample 4- Basic Image Swap 1) HTML used to incorporate the script We use a preloader in the head section to insure the images are loaded and ready when needed once the page loads. The event handlers do all the interaction with the user, and allow a blending of the HTML document with the JavaScript commands on an object by object basis. 2) DOM Here, we access the images array and alter the appearance of the page by replacing images by redefining the individual image's src (the URL of the image). Note the different methods used to access the same images in the mouseout and mouseover event handlers. The mouseover makes use of the images[] array, and references the individual image by it's position on the document. The mouseout makes use of the document object property created by naming the image in the HTML tag, and references the individual image by name (less confusing, but arrays have advantages as well, as you will learn in other threads). 3) User Interaction As the user moves the highlight box around your webpage, you can provide more information or create an eye grabbing visual effect ect, making the link itself more usefull without ever having been followed, and creating a more user friendly experience in the process. For WebTv users, this is particularly useful in creating what computer users call a "hover" state for your links. |