|Lesson 4: DOM|
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:
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),
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:
And to change the image, we use the same syntax, adding an equals sign and a url enclosed in quotes:
2) Document Object Naming
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
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.